/* Cards Section
--------------------------------------------- */

.card-section {
    padding-block: 4rem;
    overflow: hidden;
}

.card-section .content-wrapper .content {
    grid-column: 1 / -1;
}

.card-header {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--grid_columns), 1fr);
    gap: 0 var(--grid_gap);
    margin-block-end: 3rem;
    text-align: center;
}

.card-header > * {
    grid-column: 3 / -3;
    padding-inline: 2rem;
}

.card-header h2 {
    margin-block-start: 0;
    margin-block-end: .5rem;
    font-size: 3.35rem;
}

@media (max-width: 1250px) {
    .card-header h2 {
        font-size: 3rem;
    }
    .card-header > * {
        grid-column: 3 / -3;
        padding-inline: 0;
    }
}

.card-group .card-item {
    display: flex;
    flex-direction: column;
    align-content: center;
}

.card-header[data-animate] {
    opacity: 0;
    translate: 0 3rem;
    transition: all 1s cubic-bezier(.2,.45,0,.94);
    will-change: opacity, translate;
}

.card-header[data-animate].animate {
    opacity: 1;
    translate: 0 0;
}

.card-group[data-animate] > .field > .field__item {
    opacity: 0;
    translate: 0 3rem;
    transition: all 1s cubic-bezier(.2,.45,0,.94);
    will-change: opacity, translate;
    filter: drop-shadow(0px 0px 25px rgba(0, 0, 0, .1));
}

.card-group[data-animate] > .field > .field__item:nth-child(2) {
    transition-delay: .4s;
}

.card-group[data-animate] > .field > .field__item:nth-child(3) {
    transition-delay: .8s;
}

.card-group[data-animate].animate > .field > .field__item {
    opacity: 1;
    translate: 0 0;
}

.card-group > .field {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid_gap);
}

.card-group > .field > .field__item {
    display: flex;
    flex-direction: column;
    align-content: center;
    padding: 2.5rem;
    text-align: center;
    color: var(--black);
    background: var(--white);
    border-radius: var(--border_radius);
}
.card-group > .field > .field__item h3 {
    margin-block-start: 0;
    color: var(--primary_blue);
}
.card-group > .field > .field__item .field--type-image {
    align-self: center;
}

.card-group .field img {
    height: auto;
}

.card-desc .field :last-child {
    margin-block-end: 0;
}

@media (max-width: 1000px) {
    .card-header > * {
        grid-column: 1 / -1;
    }
    .card-group > .field > .field__item {
        padding: 2rem;
    }
}

@media (max-width: 850px) {
    .card-header[data-animate] {
        opacity: 1;
        translate: 0 0;
    }
    .card-group {
        width: calc(100% + 2rem);
        overflow-x: auto;
    }
    .card-group[data-animate] > .field > .field__item {
        opacity: 1;
        translate: 0 0;
        width: 300px;
        flex: 0 0 300px;
        filter: none;
    }
    .card-group > .field {
        display: flex;
        gap: var(--grid_gap);
    }
    .card-group > .field::after {
        content: '';
        display: block;
        width: calc(2rem - var(--grid_gap));
        height: 1px;
        flex-shrink: 0;
    }
    .card-group > .field > .field__item {
        padding: 1.5rem;
    }
}