.video-thumb,.yt-video-wrap{
    aspect-ratio:16/9
}
.videos-page{
    margin:auto
}
.videos-search-wrapper{
    margin-bottom:30px
}
.videos-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:-10px 0 26px
}
.videos-filter-btn{
    border:1px solid #d7cec4;
    background:#fff;
    color:#4b3d2f;
    padding:8px 14px;
    font-size:.82rem;
    line-height:1.2;
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s
}
.videos-filter-btn:hover,.videos-filter-btn.is-active{
    background:#4b3d2f;
    border-color:#4b3d2f;
    color:#fff
}
.videos-search-input{
    transition:border-color .2s,box-shadow .2s
}
.videos-search-input:focus{
    box-shadow:0 0 0 3px rgba(175,125,76,.1)
}
.videos-search-input::placeholder{
    color:#999
}
.videos-grid{
    display:grid;
    gap:20px;
    justify-content:center;
    grid-template-columns:1fr
}
@media (min-width:700px){
    .videos-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media (min-width:1024px){
    .videos-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@media (min-width:1280px){
    .videos-grid{
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
}
.video-card{
    background:#fff;
    overflow:hidden
}
.video-link{
    text-decoration:none;
    color:inherit;
    display:block
}
.video-thumb{
    position:relative;
    background:#eee
}
.video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.video-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(to top,rgba(0,0,0,.4),transparent 60%)
}
.play-btn{
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(0,0,0,.65);
    position:relative
}
.play-btn::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-40%,-50%);
    border-left:18px solid #fff;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent
}
.video-title{
    color:#000;
    font-size:15px!important;
    margin:0;
    padding:12px 14px 14px
}
.videos-pagination{
    margin-top:30px;
    text-align:center
}
#yt-modal{
    position:fixed;
    inset:0;
    z-index:11000;
    background:rgba(0,0,0,.75);
    align-items:flex-end;
    justify-content:center;
    padding:20px
}
#yt-modal[hidden]{
    display:none!important
}
#yt-modal:not([hidden]){
    display:flex
}
.yt-modal-inner{
    position:relative;
    max-width:1000px;
    width:100%;
    background:#000;
    border-radius:14px;
    overflow:hidden
}
#yt-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:5;
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.2);
    color:#fff;
    font-size:22px;
    cursor:pointer
}