.hero-section {
    position: relative;
    max-height: 45rem;
}

.hero-inner {
    display: flex;
    flex-direction: column;
}

.hero-section:not(.hide_bottom_border) {
    border-bottom: 1px solid var(--border-color);
}

.has-right-image .hero-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.hero-content {
    padding: 9rem var(--container-space);
}

.hero-section-simple .hero-content {
    padding: 10rem var(--container-space) 20rem var(--container-space);
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-section:not(.has-right-image) .hero-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.hero-right {
    display: flex;
}

.hero-right img {
    width: 100%;
    height: 100%;
    max-height: 45rem;
    object-fit: cover;
}

.hero-headline {
    font-size: 5rem;
    letter-spacing: -0.1rem;
    background: linear-gradient(0deg, #999 0%, #FFF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-detail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero-description {
    line-height: 140%;
    max-height: 35.75rem;
}

@media (max-width: 1335px) {
    .hero-headline {
        font-size: 4rem;
    }
}

@media (max-width: 992px) {
    .hero-section {
        max-height: 100%;
    }

    .has-right-image .hero-inner,
    .hero-section:not(.has-right-image) .hero-content {
        grid-template-columns: repeat(1, 1fr);
    }

    .hero-content {
        align-items: center;
        text-align: center;
        padding: 5rem var(--container-space);
    }

    .hero-section-simple .hero-content {
        padding: 5rem var(--container-space);
    }

    .hero-headline {
        font-size: 3.5rem;
    }

    .hero-detail {
        align-items: center;
        text-align: center;
    }

    .hero-headline br,
    .hero-description br {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-headline {
        font-size: 3rem;
    }

    .hero-description {
        font-size: 0.875rem;
    }
}