/* Contenedor que envuelve todos los videos */
.video-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px; /* Separación uniforme entre los videos */
}

/* Contenedor de cada video */
.video-container {
  flex: 1 1 30%; /* Cada video ocupa 30% del ancho en escritorio */
  max-width: 30%; /* Ancho máximo del contenedor */
  border: 5px solid #444; /* Borde alrededor del video */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Sombra elegante */
  overflow: hidden;
  background-color: #222; /* Fondo oscuro elegante */
  transition: transform 0.3s ease; /* Animación suave al pasar el mouse */
  display: flex; /* Contenedor flexible */
  align-items: center; /* Centrar el contenido verticalmente */
  justify-content: center; /* Centrar el contenido horizontalmente */
  aspect-ratio: 16 / 9; /* Forzar relación de aspecto 16:9 */
}

/* Estilo para los iframes dentro del contenedor */
.video-container iframe {
  width: 100%;
  height: 100%; /* Ajustar al tamaño del contenedor */
  border: 0; /* Sin borde extra */
}

/* Hover en escritorio */
.video-container:hover {
  transform: scale(1.05); /* Aumenta el tamaño ligeramente al pasar el mouse */
}

/* Ajustes responsivos para dispositivos móviles */
@media (max-width: 768px) {
  .video-wrapper {
    flex-direction: column; /* Los videos se apilan en columna en móvil */
  }

  .video-container {
    max-width: 100%; /* Cada video ocupa el 100% del ancho */
    margin-bottom: 20px; /* Separación inferior entre videos */
  }
}