/* Home */
:root {
    --font-size-hero: 8rem;
}
@media screen and (max-width: 1024px) {
:root {
    --font-size-hero: 4rem;
}
}
@media screen and (max-width: 767px) {
:root {
    --font-size-hero: 2rem;
}
}

/* override .container */
.container {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.hero {
    min-height: calc( var(--font-size-hero) * 6 );
    /* min-height: 50svh; */

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: var(--font-size-hero);
    background: linear-gradient(
        315deg,
        var(--color-primary),
        color-mix(in hsl, var(--color-primary), white 15%)  /* hsl(2, 70%, 60%) */
    );
    color: hsl(0, 0%, 95%);
    margin-bottom: 2rem;

    text-transform: uppercase;
}

.content {
    max-width: 80%;
    margin: 0 auto;
}