.hero-banner {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    position: relative;
    width: 100wv;
    min-height: 520px;

}

.hero-banner .background-image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

.hero-banner .background-image img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }


.hero-banner::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 24%,
            rgba(0, 0, 0, 0.5) 100%
        );
    }

.hero-banner .hero-banner-wrapper {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        color: var(--white);
    }

.hero-banner .hero-banner-wrapper .logo-container {
            max-width: 120px;
            height: 16px;
        }

.hero-banner .hero-banner-wrapper .logo-container img {
                vertical-align: bottom;
            }

.hero-banner .hero-banner-wrapper h1 {
            font-size: max(24px, min(5vw, 48px));
            font-weight: 700;
        }

.hero-banner .hero-banner-wrapper .text-large {
            font-size: max(20px, min(5vw, 32px));
            font-weight: 500;
        }


@media (max-width: 1056px) {

    .hero-banner {
        align-items: end;
        padding-bottom: 88px;
    }

        .hero-banner::after {
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 24%,
                rgba(0, 0, 0, 0.5) 100%
            );
        }
}


@media (max-width: 520px) {

    .hero-banner {
        padding-bottom: 28px;
        min-height: 300px;
    }
}