.hero-container {
    background-color: var(--col-bw-100);
    margin-top: 1rem;
}

.hero-section {
    position: relative;
    display: grid;
    min-height: clamp(40vh, 80vh, 130vw);
    place-items: end start;
    overflow: hidden;
    text-align: center;
    background-color: var(--col-bw-200);
    border-radius: var(--border-radius-s);

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgb(18 32 51 / .38), transparent 55%);
    }

    img {
        position: absolute;
        height: 100%;
        inset: 0;
        width: 100%;
        object-fit: cover;
        filter: brightness(1.03) saturate(1) hue-rotate(10deg);
    }

    p {
        text-align: left;
        position: relative;
        z-index: 1;
        max-width: 52rem;
        margin: clamp(1.5rem, 4vw, 3.5rem);
        font-family: var(--font-sans), sans-serif;
        font-size: clamp(1.1rem, 1rem + 1vw, 1.7rem);
        font-weight: 600;
        line-height: 1;
        color: white;
        text-wrap: balance;
        text-shadow: 0 2px 18px rgb(18 32 51 / .35);
        
        span {
            font-family: var(--font-serif), serif;
            display: block;
            margin-top: .8rem;
            font-size: clamp(2rem, 5.5vw, 4.2rem);
            line-height: .95;
            color: white;
            letter-spacing: -.04em;
        }
    }
}

@media (max-width: 60rem) {
    .hero-container {
        margin-top: 4rem;

        .hero-section {
            border-radius: 0;
        }
    }
}