.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
    padding: 0;
}
.track{
    display:flex;
    width:200vw;
    height:100%;
    gap:20px;
}

.panel{
    flex: 0 0 47vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
}
.panel--img{
    flex: 0 0 30vw;
}
.panel_button{
    flex: 0 0 40vw;
    justify-content: left;
    z-index:-1;
    gap: 30px;
}

/* .home-header {
    font-size: 13.5rem;
    font-weight: 400;
    width: 100%;
    line-height: 110%;
    text-wrap: wrap;
    word-break: keep-all;
    text-transform: uppercase;
    width: fit-content;
} */
.panel--text{
    background:#000;
}
.panel--img {
    background:#000;
    flex-direction:column;
}

  /* ---------- PILL MASK ---------- */
.mask{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%) scale(.5);
    transform-origin:center;
    width:40vw;aspect-ratio:16/9;
    clip-path:url(#pill);-webkit-clip-path:url(#pill);
    will-change:transform;
    /* clip-path: inset(0% 0% round 30px); */
}
.mask-inner  {
    width:100%;
    height:100%;
    overflow:hidden;
}
.fixed-scale {
    position:absolute;
    left:50%;
    top:50%;
    width:117vw;
    height:100vh;
    transform:translate(-50%,-50%);
    will-change:transform;
}
.fixed-scale > *{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.fixed-scale > video{
    object-fit:contain;
}

.gallery-img{
    opacity:0;
}

.home-header{
    font-size:5vw;
    margin-top:2vh ;
    font-weight: 400;
    width: 100%;
    line-height: 110%;
    text-wrap: wrap;
    word-break: keep-all;
    text-transform: uppercase;
    width: fit-content;
}
svg{
    position:absolute;
    width:0;
    height:0;
}
@media(max-width:767px){
    .mask{
        width:60vw;
    }
    .fixed-scale > *{
        object-fit:contain;
    }
    .home-button {
        font-size: 1.5rem;
        margin-top:18px;
    }
    .panel_button{
        gap: 0px;
    }
}