.vtpa-grid{
display:grid;
gap:28px;
}

.columns-2{grid-template-columns:repeat(2,1fr)}
.columns-3{grid-template-columns:repeat(3,1fr)}
.columns-4{grid-template-columns:repeat(4,1fr)}

.vtpa-card{
border-radius:28px;
overflow:hidden;
}

.vtpa-hidden{
display:none;
}

.vtpa-bg{
height:480px;
background-size:cover;
background-position:center;
position:relative;
transition:.4s;
}

.vtpa-card:hover .vtpa-bg{
transform:scale(1.03);
}

.vtpa-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.92),transparent);
}

.vtpa-bottom{
position:absolute;
bottom:25px;
left:25px;
right:25px;
display:flex;
justify-content:space-between;
align-items:flex-end;
z-index:2;
}

.vtpa-title{
margin:0 0 8px;
line-height:1.1;
font-weight:700;
}

.vtpa-subtitle{
margin:0;
opacity:.9;
}

.vtpa-play{
width:74px;
height:74px;
border-radius:50%;
border:1px solid rgba(255,255,255,.4);
background:rgba(255,255,255,.15);
backdrop-filter:blur(10px);
font-size:28px;
color:#fff;
cursor:pointer;
}

.vtpa-btn-wrap{
text-align:center;
margin-top:40px;
}

.vtpa-view-btn{
display:inline-block;
padding:18px 42px;
border-radius:40px;
border:none;
color:#fff;
font-weight:600;
cursor:pointer;
}

#vtpa-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.95);
z-index:999999;
}

.vtpa-modal-box{
width:80%;
margin:60px auto;
position:relative;
}

#vtpa-player{
width:100%;
border-radius:20px;
}

#vtpa-close{
position:absolute;
right:0;
top:-45px;
font-size:42px;
color:#fff;
cursor:pointer;
}

@media(max-width:768px){

.columns-2,
.columns-3,
.columns-4{
grid-template-columns:1fr
}

.vtpa-bg{
height:400px;
}

.vtpa-bottom{
flex-direction:row;
}

}