.flex_layout.main_hero .flex_layout_wrapper{
    height: 100vh;
    place-content: end;
    background-color: #1c1c1c;
    color: #fff;
    position: relative;
    isolation: isolate;
}

.flex_layout.main_hero .background{
    z-index: -1;
    position: absolute;
    inset: 0;
    isolation: isolate;
}

.flex_layout.main_hero .background::before{
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.2) 100%);
}

.flex_layout.main_hero .background video,
.flex_layout.main_hero .background img{
    line-height: 0;
    object-fit: cover;
    width: 100%; height: 100%;
    position: absolute;
    pointer-events: none;

    transition: opacity 1s ease-in-out;
}

/**
* Video loop
*/

.flex_layout.main_hero .background video:not(.visible){
    opacity: 0;
}


.flex_layout.main_hero .heading_wrapper{
    /* grid-column-end: span 6; */
    padding: var(--grid-margin);
    color: inherit;
    position: absolute;
    bottom: 20%;
    width: 50%;
}

.flex_layout.main_hero .heading_wrapper h1{
    color: inherit;
}


.flex_layout.main_hero .cta{
    width: 100%;
    position: relative;
    display: grid;
    grid-column-end: span 3;
    grid-row: 2 / span 1;

    padding: var(--grid-margin);
    color: #fff;
    place-self: end;
}

/* .flex_layout.main_hero .cta:nth-of-type(1){ grid-column-start: 1; }
.flex_layout.main_hero .cta:nth-of-type(2){ grid-column-start: 4; } */

.flex_layout.main_hero .cta::before{
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(transparent, rgba(10, 10, 10, 0.4));
    opacity: 0;
    width: 100%; height: 75vh;

    transition: opacity 300ms ease-in-out;
}

.flex_layout.main_hero .cta:not(:last-child)::after{
    content: '';
    position: absolute;
    pointer-events: none;
    bottom: 0; right: 0;
    z-index: -1;
    width: 1px; height: 75vh;
    opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.75));
}

.flex_layout.main_hero .cta > span{
    font-size: 1.75rem;
    font-weight: 800;
    color: inherit;
    display: flex;
    align-items: center;
    gap: .5em;
}

.flex_layout.main_hero .cta > span::after{
    content: '';
    width: 1em;
    height: auto;
    aspect-ratio: 2 / 1;
    background-color: currentColor;
    mask: url('../../../../../../uploads/green-oaks/icons/arrow.svg') no-repeat center / contain;
    -webkit-mask: url('../../../../../../uploads/green-oaks/icons/arrow.svg') no-repeat center / contain;

    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

.flex_layout.main_hero .cta:hover > span::after{
    transition-delay: 200ms;
    transform: translateX(0);
    opacity: 1;
}

.flex_layout.main_hero .cta:hover::before{
    opacity: 1;
}

.flex_layout.main_hero .cta .subtitle{
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows 300ms ease-in-out;
}
.flex_layout.main_hero .cta:hover .subtitle{
    grid-template-rows: 1fr;
}

.flex_layout.main_hero .cta .subtitle p{
    overflow: hidden;
    margin-bottom: 0;
}


@media only screen and (max-width: 992px){

    .flex_layout.main_hero .flex_layout_wrapper{
        height: 80vh;
    }

    .flex_layout.main_hero .heading_wrapper{
        width: 100%;
        position: static;
        grid-column: 1 / -1;
    }

    .flex_layout.main_hero .cta{
        display: none;
    }

}