@mixin aspect-ratio($width, $height) {
    position: relative;
  
    &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: ($height / $width) * 100%;
    }
  
    > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Asegura que la imagen llene el contenedor */
    }
  }
  
  /* Styling */
  
  section {
    background: #fdfdfd;
    padding: 50px 0;
  }
  
  .container {
    max-width: 95%; /* Ajusta esto según necesites */
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .carousel {
    display: block;
    text-align: left;
    position: relative;
    margin-bottom: 22px;
    width: 100%; /* Asegura que el carrusel ocupe el ancho completo del contenedor */
  
    > input {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      height: 1px;
      width: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
  
      &:nth-of-type(6):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -500%; }
      &:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -400%; }
      &:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -300%; }
      &:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -200%; }
      &:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -100%; }
      &:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: 0%; }
  
      &:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1) { box-shadow: 0px 0px 0px 5px #ffcf2d; }
      &:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) { box-shadow: 0px 0px 0px 5px #ffcf2d; }
      &:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) { box-shadow: 0px 0px 0px 5px #ffcf2d; }
      &:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) { box-shadow: 0px 0px 0px 5px #ffcf2d; }
      &:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) { box-shadow: 0px 0px 0px 5px #ffcf2d; }
      &:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6) { box-shadow: 0px 0px 0px 5px #ffcf2d; }
    }
  }
  
  .carousel__slides {
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    display: flex;
    border-radius: 8px;
  }
  
  .carousel__slide {
    position: relative;
    display: block;
    flex: 1 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 300ms ease-out;
    vertical-align: top;
    box-sizing: border-box;
    white-space: normal;
  
    figure {
      display: flex;
      flex-direction: column; /* Asegura que el figcaption esté debajo de la imagen */
      margin: 0;
    }
  
    div {
      @include aspect-ratio(3, 2);
      width: 100%;
    }
  
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Asegura que la imagen llene el contenedor */
    }
  
    figcaption {
      align-self: flex-end;
      padding: 10px;
      background: #000000; /* Fondo semitransparente para mejorar legibilidad */
      width: 100%; /* Asegura que el caption ocupe el ancho completo */
      box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
    }
  
    .credit {
      margin-top: 1rem;
      color: rgb(255, 255, 255); /* Ajuste de color para crédito */
      display: block;
    }
  
    &.scrollable {
      overflow-y: scroll;
    }
  }
  
  .carousel__thumbnails {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin: 0 -10px;
    justify-content: center;
    
    .carousel__slides + & {
      margin-top: 20px;
    }
  
    li {
      flex: 1 1 auto;
      max-width: calc((100% / 6) - 20px);
      margin: 0 10px;
      transition: all 300ms ease-in-out;
    }
  
    label {
      display: block;
      @include aspect-ratio(1, 1);
  
      &:hover,
      &:focus {
        cursor: pointer;
  
        img {
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
          transition: all 300ms ease-in-out;
        }
      }
    }
  
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Asegura que la miniatura llene el contenedor */
    }
  }



  .experiencia {
    position: absolute;
    bottom: 20px; /* Posición desde abajo */
    left: 10px; /* Posición desde la izquierda */
    background-color: black; /* Fondo semitransparente */
    color: #ffcf2d; /* Color del texto */
    padding: 10px; /* Espaciado interno ajustado */
    border-radius: 5px; /* Bordes redondeados */
    z-index: 10; /* Asegura que el cuadrado esté sobre la imagen */
    width: auto; /* Ancho automático para ajustarse al contenido */
    max-width: 160px; /* Máximo ancho del cuadrado */
    text-align: center; /* Centra el texto horizontalmente */
    margin: auto;
  }
  
  .experiencia .titulo {
    margin: 0; /* Elimina el margen superior e inferior */
    font-size: 5.2rem; /* Tamaño del texto del título */
  }
  
  .experiencia .subtitulo {
    margin: 0; /* Elimina el margen superior e inferior */
    font-size: 1.0rem; /* Tamaño del texto del subtítulo */
  }
  
  /* Media queries para tamaños de pantalla más pequeños */
  @media (max-width: 768px) {
    .experiencia {
      font-size: 0.8rem; /* Tamaño del texto más pequeño */
      padding: 8px; /* Espaciado interno más pequeño */
      max-width: 120px; /* Máximo ancho del cuadrado más pequeño */
    }
  
    .experiencia .titulo {
      font-size: 1rem; /* Tamaño del texto del título más pequeño */
    }
  
    .experiencia .subtitulo {
      font-size: 0.7rem; /* Tamaño del texto del subtítulo más pequeño */
    }
  }
  
  @media (max-width: 480px) {
    .experiencia {
      font-size: 0.7rem; /* Tamaño del texto más pequeño */
      padding: 6px; /* Espaciado interno más pequeño */
      max-width: 100px; /* Máximo ancho del cuadrado más pequeño */
    }
  
    .experiencia .titulo {
      font-size: 0.9rem; /* Tamaño del texto del título más pequeño */
    }
  
    .experiencia .subtitulo {
      font-size: 0.6rem; /* Tamaño del texto del subtítulo más pequeño */
    }
  }