/* HERO */
.hero-container {
    height: 75vh;
    width: 100vw;
    justify-self: center;
    position: relative;
    display: grid;
    place-items: start center;
}

/* HERO - Background image */
.hero-container::before {
    content: "";
    position: relative;
    display: block;
    width: 100vw;
    height: inherit;
    object-position: center;
    object-fit: cover;
    z-index: -1;
    /* Add this to keep background behind content */
}

/* HERO title */
.hero_title {
    text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;
    line-height: 160%;
    position: absolute;
    bottom: 40%;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    font-size: clamp(20px, 3vw, 40px);
    text-align: center;
    color: white;
    /* width: 100%; */
    font-weight: 500;
}


@media (max-width: 480px) {
    .hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 90%;
        display: block;
        position: relative;
    }

    .hero-container {
        display: grid;
        padding: var(--mobile-padding);
    }

    .hero-container, .hero-container::before {
        height: 30vh;
    }
}


/* HERO Background image*/
/* Custom HERO images, needs to be added for each header with custom html tag */
.room-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../../images/header-banner/room-banner-01.webp') no-repeat center bottom/cover;
    background-position: 50% 90%;
}

.access-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../../images/locationHeader.webp') no-repeat center bottom/cover;
    background-position: center;
}

.onsen-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../../images/header-banner/onsen-banner-01.webp') no-repeat center center/cover;
    background-position: 50% 65%;;
}

.garden-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../../images/Garden-Assets/gardenHeader.avif') no-repeat center bottom/cover;
    background-position: bottom;
}

.dining-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../../images/header-banner/dining-banner-01.webp') no-repeat center bottom/cover;
    background-position: bottom;
}

.theater-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../../images//Theater-Assets/theaterHeader.avif') no-repeat center bottom/cover;
    background-position: center;
}

.lifestyle-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../../images/sunset.webp') no-repeat center bottom/cover;
    background-position: center;
}

.about-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../../images/header-banner/about-banner-01.webp') no-repeat center bottom/cover;
    background-position: 50% 90%;
}

.news-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../../images/general4.webp') no-repeat center bottom/cover;
    background-position: center;
}

.facility-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../../images/header-banner/facility-banner-01.webp') no-repeat center bottom/cover;
    background-position: center;
}

.sight-bg::before {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../../images/sunset.webp') no-repeat center bottom/cover;
    background-position: center;
}