/* Wrapper general */
.vtg-wrapper {
  width:100vw;
  overflow:hidden;
  position:relative;
  height:85vh;
}

/* GRID PRINCIPAL */
.vtg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 12px;
  height: 200%;
  position: relative;
  align-items: start;
  transition: opacity 0.35s ease;
}

/* PAUSA DEL GRID */
.vtg-grid.vtg-paused { 
  opacity: .96; 
}

/* ❗ Pausar realmente la animación (las columnas son las que se mueven) */
.vtg-grid.vtg-paused .vtg-column {
  animation-play-state: paused !important;
}

/* COLUMNAS (tienen la animación real) */
.vtg-column {
  display:flex;
  flex-direction: column;
  gap:12px;
  animation: vtgScroll 60s linear infinite;
  will-change: transform;
}

.vtg-column:nth-child(2){ animation-duration:68s; animation-delay:-10s; }
.vtg-column:nth-child(3){ animation-duration:55s; animation-delay:-20s; }
.vtg-column:nth-child(4){ animation-duration:72s; animation-delay:-5s; }
.vtg-column:nth-child(5){ animation-duration:64s; animation-delay:-15s; }

/* ANIMACIÓN */
@keyframes vtgScroll {
  0% { transform:translateY(0); }
  100% { transform:translateY(-50%); }
}

/* ITEM Y MINIATURA */
.vtg-item { 
  position:relative;
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  aspect-ratio:9/16;
}

.vtg-thumb-wrap {
  position: absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.vtg-thumb {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .3s ease;
}

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

/* ICONO PLAY */
.vtg-play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:3rem;
  color:#fff;
  text-shadow:0 0 8px rgba(0,0,0,.6);
  pointer-events:none;
}

/* PLAYER */
.vtg-player {
  position:relative;
  width:100%;
  height:100%;
}

/* RESPONSIVE */
@media (max-width:1400px){ .vtg-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width:1024px){ .vtg-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:768px){  .vtg-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:500px){  .vtg-grid{ grid-template-columns: repeat(1,1fr); } }

/* Esta ya no se usa, la puedes borrar si quieres */
.vtg-gallery.paused {
  animation-play-state: paused !important;
}