#video-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:24px;
  padding:0 20px;
  margin-top:80px;
  margin-bottom:60px;
}


.video-thumb{
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .25s ease;
}

.video-thumb:hover{
  transform:scale(1.03);
}


.video-thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
}


.thumb-container{
  position:relative;
}


.play-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:40px;
  color:white;
  opacity:.85;
  pointer-events:none;
}


.video-duration{
  position:absolute;
  bottom:8px;
  right:8px;

  background:rgba(0,0,0,.85);
  color:white;

  font-size:12px;
  font-weight:600;

  padding:3px 6px;
  border-radius:4px;
}


.video-info{
  padding-top:8px;
}

.video-title{
  font-size:15px;
  font-weight:500;
  line-height:1.4;

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

  overflow:hidden;
}


.video-modal{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.85);

  display:none;
  justify-content:center;
  align-items:center;

  z-index:10000;
}

.video-modal[aria-hidden="false"]{
  display:flex;
}


#modal-video{
  width:75vw;
  height:42vw;

  max-width:960px;
  max-height:540px;

  border:none;
  border-radius:12px;
}


#close-modal{
  position:absolute;
  top:25px;
  right:30px;

  background:none;
  border:none;

  font-size:36px;
  color:white;
  cursor:pointer;
}


@media(max-width:768px){

#video-gallery{
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}

#modal-video{
width:95vw;
height:54vw;
}

}