.hero {
    aspect-ratio: 16 / 6;
    overflow: hidden;

    padding-block-start: calc(var(--header-height) * 1px);
}

.hero .content-wrapper {
    align-items: center;
    height: 100%;
}

.hero .content-wrapper .content {
    padding-block: 2rem;
    grid-column: 2 / calc((var(--grid_columns) / 2) + 1);
}

.hero img {
    height: auto;
}

.hero h1 {
    margin-block-end: 2rem;
}

.hero h1:last-child {
    margin-block-end: 0;
}

.hero.flip .content {
    grid-column: 7 / -2;
}

.hero .content-wrapper .field--type-image {
    align-self: end;
}

.hero.flip .content-wrapper .field--type-image {
    grid-column: 1 / 6;
    grid-row: 1;
}

@media (max-width: 1500px) {
    .hero {
        aspect-ratio: auto;
    }
    .hero .content-wrapper .content {
        padding-block: 4rem;
    }
}

@media (max-width: 1100px) {
    .hero h1 {
        font-size: 3.5rem;
        line-height: 1;
    }
    .hero.flip .content-wrapper .content {
        grid-column: 7 / -1;
    }
}

@media (max-width: 850px) {
    .hero h1 {
        font-size: 3rem;
    }
    .hero .content-wrapper .content,
    .hero.flip .content-wrapper .content {
        grid-column: 1 / -1;
    }
    .hero.flip .content-wrapper .field--type-image {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 400px) {
    .hero h1 {
        font-size: 2.5rem;
    }
}