.vmp-wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:20px;
    align-items:start;
}

@media (min-width:1700px){
    .vmp-wrap{
        grid-template-columns:minmax(0,1fr) 350px;
    }
}

@media (min-width:2200px){
    .vmp-wrap{
        grid-template-columns:minmax(0,1fr) 400px;
    }
}

/* PLAYER */

.vmp-player iframe,
.vmp-player-frame iframe{
    width:100%;
    height:390px !important;
    border:0;
    border-radius:12px;
    display:block;
}

@media (min-width:850px){
    .vmp-player{
        position:sticky;
        top:20px;
    }
}

/* SIDEBAR */

.vmp-sidebar{
    border:1px solid #eee;
    border-radius:12px;
    background:#fff;
    overflow:hidden;

    height:390px;
    display:flex;
    flex-direction:column;
}

.vmp-header{
    padding:16px;
    border-bottom:1px solid #eee;
    flex-shrink:0;
}

.vmp-header h3{
    margin:0;
    font-size:18px;
    line-height:1.3;
}

.vmp-header div{
    font-size:13px;
    color:#777;
}

.vmp-list{
    flex:1;
    min-height:0;
    overflow-y:auto;
}

/* ITEM */

.vmp-item{
    display:flex;
    gap:12px;
    padding:10px;
    cursor:pointer;
    border-bottom:1px solid #f1f1f1;
    transition:.2s;
}

.vmp-item:hover{
    background:#f7f7f7;
}

.vmp-item.active{
    border-left:4px solid #f47a1f;
    background:#fff3e8;
}

.vmp-item img{
    width:100px;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;
}

/* META */

.vmp-meta{
    flex:1;
    min-width:0;
}

.vmp-title{
    font-size:14px;
    font-weight:600;
    line-height:1.35;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
    text-overflow:ellipsis;
}

.vmp-channel{
    margin-top:4px;
    font-size:12px;
    color:#777;
    line-height:1.4;
}

/* TABLET + MOBILE */

@media(max-width:991px){

    .vmp-wrap{
        display:flex;
        flex-direction:column;
        gap:15px;
    }

    .vmp-player{
        order:1;
        width:100%;
    }

    .vmp-sidebar{
        order:2;
        width:100%;
        height:auto;
    }

    .vmp-list{
        height:auto;
        max-height:none;
        overflow:visible;
    }

    .vmp-player iframe,
    .vmp-player-frame iframe{
        width:100%;
        height:320px !important;
    }

}