.home {
    &>* {
        padding-block: var(--space-l-2xl);
        padding-inline: var(--padding-inline-m)
    }

    & .hero-section {
        display: grid;

        gap: var(--space-s-l);

        align-items: center;

        & .text {
            display: flex;

            flex-direction: column;
            gap: var(--space-s-m);
            justify-content: center;

            &:not(:last-child) {
                margin-block-start: var(--space-xs-s);
            }

            & .subtitle {
                text-transform: uppercase;
                font-size: var(--fs-100);
                color: var(--clr-pine);
                font-weight: 700;
            }
        }
    }

    & .blog-section {
        padding-inline: var(--padding-inline-l);
        padding-block-start: calc(var(--space-l-2xl) / 2);

        background: var(--clr-overlay);

        display: flex;
        flex-direction: column;
        gap: calc(var(--space-l-2xl) / 2);
        align-items: center;

        & header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            column-gap: var(--space-3xl);
            row-gap: var(--space-m);

            & a {
                color: var(--clr-text);
                margin-block: auto;
                text-decoration: none;
                font-size: var(--fs-200);

                &:hover,
                &:focus,
                &:focus-visible {
                    color: var(--clr-gold);
                }
            }
        }

        & section {
            --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem));
            --content-width: calc(4 * var(--space-xl));

            width: 100%;
            display: grid;
            grid-template-columns: repeat(var(--grid-columns), 1fr);
            grid-gap: var(--grid-gutter);
        }
    }
}


:root {
    --grid-columns: 4;
}

.blog-section .card {
    grid-column-end: span 4;
}

@media (min-width: 700px) {
    :root {
        --grid-columns: 12;
    }

    .blog-section .card {
        grid-column-end: span 6;
    }

    .blog-section .card:nth-child(3) {
        display: none;
    }
}

@media (min-width: 1200px) {
    .blog-section .card {
        grid-column-end: span 4;
    }

    .blog-section .card:nth-child(3) {
        display: unset;
    }
}
