.section {
    --horizontalSpacing: max(16px, 3vw);
    --verticalSpacing: max(40px, 3vw);
    --padding: var(--verticalSpacing) var(--horizontalSpacing);

    padding: var(--padding);
}

/* Section Container */
.section .section_container {
    display: flex;
    flex-direction: column;
    gap: var(--verticalSpacing);
    max-width: 1300px;
    margin: 0 auto;
}

.section .section_container * {
    margin: unset;
    padding: unset;
}

/* Section Header */
.section .section_header {
    --fontSize: clamp(18px, 1vw, 20px);

    display: flex;
    flex-direction: column;
    gap: 32px;

    font-size: var(--fontSize);
}

.section_header .header_title {
    --background: linear-gradient(to right, #1a446a 0, #fff 100%);
    --color: white;
    --horizontalSpacing: clamp(16px, 5vw, 32px);
    --verticalSpacing: clamp(16px, 5vw, 24px);
    --padding: var(--verticalSpacing) var(--horizontalSpacing);

    padding: var(--padding);
    background: var(--background);
    color: var(--color);
    border-radius: 4px;

    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 700;
}

.section_header .header_details {
    line-height: 1.5;
}

/* Cards Grid */
.cards-list {
    --gap: clamp(16px, 3vw, 32px);
    --minCardSize: calc(max(240px, 25%) - var(--gap));

    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--minCardSize), 1fr));
    padding: unset;
    margin: unset;
}

.cards-list .card {
    --border: 3px solid #eaebed;
    --padding: 16px;
    --fontSize: 18px;

    border: var(--border);
    font-size: var(--fontSize);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: initial;
    margin: unset;
}

/* Reset properties */
.cards-list .card * {
    font-size: inherit;
    padding: unset;
    margin: unset;
}

/* Dynamic Padding */
.cards-list .card > * {
    padding: var(--padding);
}
.cards-list .card > * + * {
    padding-top: unset;
}

/* Brand Card */
.card.--brand {
    text-align: center;
}
.card.--brand .card_cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.brand-logo {
    --size: 120px;
    max-width: var(--size);
    flex-grow: 1;
}

.card.--brand .card-title {
    font-size: 1.3em;
    font-weight: 700;
}

/* Cards STATES */
@media (min-width: 800px) and (hover: hover) {
    .cards-list a:is(:focus) {
        outline: 4px solid hsl(218deg 100% 85%);
        transition: all 0ms linear;
    }

    .cards-list .card.--brand {
        --duration: 0.4s;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* STATE: DEFAULT */
    .cards-list .card.--brand .brand-logo {
        transform: scale(1);
        transition: transform 0.8s var(--ease);
    }
    .cards-list .card.--brand .card_content {
        max-height: 300px;
        overflow: hidden;
        transition: max-height var(--duration) var(--ease), padding 0.2s linear,
        opacity 0.2s linear;
    }

    /* STATE: HOVERED */
    .cards-list .card.--brand:not(:hover, :focus) {
        min-height: 240px;
    }
    .cards-list a:not(:hover, :focus) .card .brand-logo {
        transform: scale(1.2);
    }
    .cards-list a:not(:hover, :focus) .card .card_content {
        max-height: 0px;
        padding: 0px;
        opacity: 0;
    }
}

/* MEDIA QUERIES */
@media (max-width: 550px) {
    .section_container .cards-list {
        --negativeMargin: calc(var(--horizontalSpacing) * -1);
        --minWidth: calc(100vw - var(--horizontalSpacing));
        --minCardSize: 20ch;

        grid-auto-flow: column;
        grid-auto-columns: var(--minCardSize);
        min-width: var(--minWidth);
        margin: 0 var(--negativeMargin);
        padding: 0 var(--horizontalSpacing);
        padding-bottom: 16px;
        scroll-behavior: smooth;

        /* Scroll Snap */
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }

    .section_container .cards-list > * {
        scroll-snap-align: center;
    }
}