.lifestyles-hero {
    

    & {
        aspect-ratio: 16/9;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    h1 {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        font-size: 3.25rem;
        line-height: 1.1;
    }

    h1,
    h2 {
        color: white;
        text-shadow: 2px 2px 5px #000000;
    }


    img {
        width: 100%;
    }

    .the-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
@media screen and (max-width: 767.99px){
    .lifestyles-hero h1 {
        font-size: 2.5rem;
    }
}

#hero {
    width: 100%;
    aspect-ratio: 2.5/1;
    padding-top: 6rem;
    transition: background-image 0.2s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#hero .heroBackground {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-position: 0% 20%;
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: center;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, -10px) scale(2.5);
    transform-style: preserve-3d;
}


#hero .hero-title h1 {
    margin-top: 3rem;
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 3.25rem;
    margin-bottom: 15px !important;
    line-height: 3.5rem;
    color: white;
}

#hero .hero-title h1,
#hero .hero-title h2,
#hero .hero-title h3,
#hero .hero-title h4,
#hero .hero-title h5,
#hero .hero-title h6 {
    text-shadow: 2px 2px 5px #000000;
}

/*#hero .hero-title h1:after {
	color: #6fb03b;
	content: ".";
}*/


#hero>.container {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

#hero>.container>.spacing {
    padding-bottom: 30vh;
}

@media screen and (max-width: 767px) {
    #hero {
        padding-top: 0 !important;
    }

    section#content img {
        max-width: 100%;
        height: auto !important;
    }

    @supports (-webkit-hyphens:none) {
        #hero .heroBackground {
            transform: translate3d(0, 0, -10px) scale(1.5);
        }
    }
}