.video-preview{max-width:1400px;margin:auto}
.video-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.video-preview-tile,.video-gallery-tile{
  position:relative;
  display:block;
  border:0;
  padding:0;
  overflow:hidden;
  background:#111;
  cursor:pointer;
  aspect-ratio:16/10;
}
.video-preview-tile img,.video-gallery-tile video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s ease,filter .4s ease;
}
.video-preview-tile:hover img,.video-gallery-tile:hover video{
  transform:scale(1.045);
  filter:brightness(.82);
}
.gallery-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:68px;
  height:68px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:4px;
  background:rgba(255,31,40,.94);
  color:white;
  font-size:1.35rem;
  box-shadow:0 15px 40px rgba(0,0,0,.4);
}
.center-action{text-align:center;margin-top:24px}

.video-page{padding-top:112px;background:#050505;min-height:100vh}
.video-page-hero{
  padding:90px 6vw 55px;
  max-width:1500px;
  margin:auto;
}
.video-page-hero p{
  color:var(--wit-red,#ff1f28);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.13em;
  margin:0 0 12px;
}
.video-page-hero h1{
  margin:0;
  color:white;
  text-transform:uppercase;
  font-size:clamp(3.2rem,8vw,8rem);
  line-height:.88;
}
.video-gallery-section{padding:0 6vw 90px;max-width:1600px;margin:auto}
.video-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.video-gallery-tile{width:100%}
.empty-video-message{
  border:1px solid #303030;
  background:#0c0c0c;
  padding:35px;
  color:#aaa;
  text-align:center;
}
.empty-video-message strong,.empty-video-message code{display:block}
.empty-video-message strong{color:white;text-transform:uppercase;margin-bottom:10px}
.empty-video-message code{color:#ff1f28}

.video-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.94);
}
.video-lightbox.open{display:flex}
.video-lightbox video{
  width:min(1200px,100%);
  max-height:88vh;
  background:black;
}
.video-lightbox-close{
  position:absolute;
  right:24px;
  top:18px;
  border:0;
  background:transparent;
  color:white;
  font-size:3rem;
  cursor:pointer;
}

@media(max-width:900px){
  .video-preview-grid,.video-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .video-preview-grid,.video-gallery{grid-template-columns:1fr}
  .video-page{padding-top:88px}
  .video-page-hero{padding:65px 22px 35px}
  .video-gallery-section{padding:0 14px 70px}
  .gallery-play{width:58px;height:58px}
}