/* --- Hoja de estilos para el Slider Inicio > slider youtube --- */
  .bs-video-slider {
    max-width: 1200px; /* Ancho para escritorio */
    margin: auto;
    position: relative;
    overflow: hidden; 
  }

  .bs-video-slider .slick-slide {
    padding: 0.5rem;
    box-sizing: border-box;
    display: block; 
    float: left;
  }

  .bs-video-slider iframe {
    width: 100%;
    aspect-ratio: 1 / 1; /* Formato cuadrado */
    border-radius: 16px;
    display: block;
    border: none;
  }

  /* Deshabilitar los dots de forma explícita en CSS */
  .bs-video-slider .slick-dots {
    display: none !important;
  }

  /* --- Media Query para dispositivos móviles --- */
  @media (max-width: 480px) { /* Para pantallas de 480px o menos (típicamente móviles) */
    .bs-video-slider {
      /* Reducimos el ancho máximo del slider para móviles */
      /* Una buena práctica es usar un porcentaje para adaptarse a diferentes anchos de móvil */
      max-width: 90%; /* Por ejemplo, 90% del ancho de la pantalla */
      padding: 0.5rem 0.5rem; /* Reducir el padding en móviles si es necesario */
    }

    .bs-video-slider .slick-slide {
      padding: 0.25rem; /* Ajustar el padding entre videos si se muestran más pequeños */
    }

    .bs-video-slider iframe {
      /* Si quieres que el recuadro sea aún más pequeño en móviles */
      /* Aquí puedes ajustar el width o aplicar transformaciones si es necesario, */
      /* pero `max-width` del contenedor es lo más efectivo para el tamaño general. */
      /* No es necesario cambiar el aspect-ratio aquí a menos que quieras que cambie de forma. */
    }
  }

  /* Puedes añadir otra media query para tablets si lo deseas */
  @media (min-width: 481px) and (max-width: 768px) {
    .bs-video-slider {
      max-width: 700px; /* Un ancho intermedio para tablets, por ejemplo */
      padding: 1rem 0.5rem;
    }
  }