.enlace-artist {
    color: white;
    text-decoration: none;
}

.enlace-artist:hover {
    text-decoration: underline;
}

/*Modal*/
/* Estilo para el fondo semi-transparente detrás de la modal */
.modal {
    display: none; /* La modal está oculta por defecto */
    position: fixed; /* La modal se posiciona en relación al viewport del navegador */
    z-index: 1; /* Asegura que la modal esté por encima del contenido */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Añade un desplazamiento para que se pueda desplazar el contenido de la modal si es demasiado grande */
    background-color: rgba(0,0,0,0.4); /* Un fondo negro semi-transparente */
  }
  
  /* Estilo para el contenido de la modal */
  .modal-contenido {
    margin: 7% auto; /* Coloca la modal en el centro de la pantalla */
    padding: 0px;
    width: 748px; /* Establece el ancho del contenido */
    height: 449px;
  }
  
  /* Estilo para el botón de cierre (x) */
  .cerrar {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  /* Cambia el color del botón de cierre al pasar el cursor por encima */
  .cerrar:hover,
  .cerrar:focus {
    color: #c3c3c3;
    text-decoration: none;
    cursor: pointer;
  }
  
  /*Slider*/
  .slider-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  .slider {
    display: flex;
    height: 100%;
    transition: transform 1s ease;
  }

  .slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Estilo para los botones */
  .prev-btn,
  .next-btn {
    background-color:#e81281;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .prev-btn {
    left: 0;
  }
  
  .next-btn {
    right: 0;
  }

  /*Media Screen for Mobile*/
@media (max-width: 768px) {

  .slider-container {
    height: 200px; /* Ajusta la altura para móviles según tus necesidades */
    margin-bottom: 50px;
  }

  .slider {
    transition: transform 0.5s ease; /* Ajusta la velocidad de la transición en móviles */
  }

  /* Estilo para los botones */
  .prev-btn,
  .next-btn {
    display: none;
  }

  /*Modal Contenido Youtube */
  .modal-contenido {
    margin: 7% auto; /* Coloca la modal en el centro de la pantalla */
    padding: 0px;
    max-width: 375px;
    width: 375px; /* Establece el ancho del contenido */
    height: auto;
  }

}