.home-hero {

    display: flex;

    flex-direction: column;

    gap: calc(
        var(--space-3xl) + 1rem
    );

    padding:
        var(--space-lg)
        0
        var(--space-3xl);

    margin-bottom:
        var(--space-3xl);
        
    background: #fff;
}

.home-hero__covers {

    display: grid;

    grid-template-columns:
        repeat(
            8,
            1fr
        );

    gap: 1rem;

    align-items: end;
}

.home-hero__cover {

    display: block;

    transition:
        transform .25s ease;
}

.home-hero__cover:nth-child(even) {

    transform:
        translateY(24px);
}

.home-hero__cover:hover {

    transform:
        translateY(-6px);
}

.home-hero__cover img {

    display: block;

    width: 100%;

    height: auto;
}

.home-hero__content {

    position: relative;

    text-align: center;

    max-width: 900px;

    margin-inline: auto;
}

.home-hero__content::before {

    content: "❦";

    display: block;

    margin-bottom: 1.5rem;

    font-size: 2rem;

    color: var(--color-accent);
    
    line-height: 1;
}

.home-hero__eyebrow {

    margin-bottom:
        var(--space-md);

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        var(--color-accent);
}

.home-hero__title {

    margin: 0;

    font-size:
        clamp(
            3rem,
            6vw,
            5.5rem
        );

    line-height: 1.05;
}

.home-hero__text {

    margin-top:
        var(--space-lg);

    font-size: 1.15rem;

    line-height: 1.8;

    color:
        var(--color-muted);
}

.home-hero__actions {

    margin-top:
        var(--space-xl);
}

@media (max-width: 1200px) and (min-width: 769px) {

    .home-hero__cover:nth-child(n+7) {

        display: none;
    }

    .home-hero__covers {

        grid-template-columns:
            repeat(6, 1fr);

        gap: 1rem;

        max-width: 900px;

        margin-inline: auto;
    }

    .home-hero__cover:nth-child(1),
    .home-hero__cover:nth-child(6) {

        transform: translateY(24px);
    }

    .home-hero__cover:nth-child(2),
    .home-hero__cover:nth-child(5) {

        transform: translateY(12px);
    }

    .home-hero__cover:nth-child(3),
    .home-hero__cover:nth-child(4) {

        transform: translateY(0);
    }
}

@media (max-width: 768px) {

    .home-hero__cover:nth-child(n+5) {

        display: none;
    }

    .home-hero__covers {

        grid-template-columns:
            repeat(4, 1fr);

        gap: .5rem;
    }

    .home-hero__title {

        font-size:
            clamp(
                2.25rem,
                10vw,
                4rem
            );
    }
    
    .home-hero__cover:nth-child(n+5) {

        display: none;
    }
}