.vpa-panels{
    width:100%;
    height:100vh;
    display:flex;
    overflow:hidden;
    position:relative;
    background:#000;
}

/* ITEM */

.vpa-panel{
    position:relative;
    height:100%;
    flex:0 0 var(--vpa-collapsed-width);
    overflow:hidden;
    cursor:pointer;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        flex .7s cubic-bezier(.77,0,.175,1),
        width .7s cubic-bezier(.77,0,.175,1);
}

/* ACTIVE */

.vpa-panel.active{
    flex:1;
}

/* OVERLAY */

.vpa-panel-overlay{
    position:absolute;
    inset:0;
    background:var(--vpa-overlay);
    transition:all .5s ease;
}

.vpa-panel.active .vpa-panel-overlay{
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.28) 45%,
        rgba(0,0,0,.08) 100%
    );
}

/* BORDER LINE */

.vpa-panel::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:1px;
    height:100%;
    background:rgba(255,255,255,.18);
    z-index:2;
}

/* CONTENT */

.vpa-panel-content{
    position:absolute;
    right:70px;
    bottom:70px;
    z-index:5;
    transition:all .55s ease;
    text-align:right;
}

/* TITLE */

.vpa-panel-title{
    margin:0;
    color:#d5a15d;

    font-size:70px;
    line-height:1;
    font-weight:300;
    letter-spacing:-2px;

    font-family:serif;

    opacity:0;
    transform:translateY(30px);

    transition:all .5s ease;
}

/* BUTTON */

.vpa-panel-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:138px;
    min-height:50px;

    border-radius:999px;
    border:1px solid rgba(255,255,255,.7);

    color:#fff;
    text-decoration:none;

    margin-top:35px;

    font-size:16px;

    backdrop-filter:blur(4px);

    opacity:0;
    transform:translateY(25px);

    transition:all .5s ease;
}

.vpa-panel-btn:hover{
    background:rgb(247 183 105);
    border-color: rgb(247 183 105) !important;
    color: #ffffff;
}

/* ACTIVE SHOW */

.vpa-panel.active .vpa-panel-title,
.vpa-panel.active .vpa-panel-btn{
    opacity:1;
    transform:translateY(0);
}

/* COLLAPSED */

.vpa-panel:not(.active) .vpa-panel-content{
    left:40px;
    right:auto;
    bottom:133px;
    transform:none;
    text-align:left;
}

/* COLLAPSED TITLE */

.vpa-panel:not(.active) .vpa-panel-title{
    opacity:1;
    transform:none;

    writing-mode:initial;
    text-orientation:initial;

    font-size:28px;
    line-height:1.2;

    letter-spacing:0;

   
}

/* HIDE BTN */

.vpa-panel:not(.active) .vpa-panel-btn{
    display:none;
}

/* TABLET */

@media(max-width:1024px){

    

    .vpa-panel{
        flex:0 0 150px;
    }

    .vpa-panel-title{
        font-size:48px;
    }

}

/* MOBILE */

@media(max-width:767px){

    .vpa-panels{
        flex-direction:column;
        height:70vh;
    }

    .vpa-panel{
        flex:none;
        height:110px;
    }

    .vpa-panel.active{
        height:420px;
    }

    .vpa-panel-content{
        left:24px;
        right:24px;
        bottom:24px;
        transform:none !important;
        text-align:left;
    }

    .vpa-panel-title{
        font-size:34px;
    }

    .vpa-panel:not(.active) .vpa-panel-title{
        max-width:none;
        font-size:22px;
    }

}