[data-component-id="usfq_theme:cards_carousel"] {
  position: relative;
  width: 100%;

  .cards-grid {
    display: none;
    gap: 1.5rem;
    width: 100%;
    /* max-width: 1400px; */
    /* margin: 0 auto; */
    justify-content: center;
  }

  .cards-grid .grid-item {
    width: 100%;
  }

  .cards-grid .grid-item > .card {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .carousel-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
  }

  .carousel-track--dual {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cards-carousel {
    position: relative;
    width: 100%;
    padding: 0 4rem;

    .carousel-inner {
      overflow: visible !important;
    }
  }

  .carousel-controls {
    button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.3s ease;
      opacity: 1;

      &.carousel-control-prev {
        margin-left: -3rem;
      }

      &.carousel-control-next {
        margin-right: -3rem;
      }
    }
  }

  .carousel-controls [data-component-id="usfq_theme:icon"].icon--color-black {
    color: var(--secondary) !important;
  }

  .carousel-controls [data-component-id="usfq_theme:icon"].icon--color-white {
    color: var(--white) !important;
  }

  .carousel-item {
    width: 100%;
  }

  .carousel-slide {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  /* Cuando un grupo del carrusel queda con una sola tarjeta (el "resto" que no
     completó el grupo de 3), el `flex: 1 1 0` de arriba la estira al 100% del
     ancho del track y se ve deforme. Al ser la única hija, le damos un ancho
     máximo razonable (el mismo que usa la retícula estática de 3 columnas) y
     dejamos que el `justify-content: center` del track la centre en vez de
     estirarla. */
  .carousel-track .carousel-slide:only-child {
    flex: 0 1 auto;
    width: 100%;
    max-width: 380px;
  }

  .carousel-slide > .card {
    width: 100%;
    height: 100%; 
    margin: 0;
  }

  /* .carousel.has-controls .carousel-slide > .card.card-textbottom {
    max-width: 380px;
  } */

  .carousel-track--dual .carousel-slide {
    width: 100%;
  }
}

@media (min-width: 768px) {
  [data-component-id="usfq_theme:cards_carousel"] {
    .carousel-track--dual {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  [data-component-id="usfq_theme:cards_carousel"].cards-four {
    .carousel-track--dual {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

@media (min-width: 1200px) {
  [data-component-id="usfq_theme:cards_carousel"] {
    .cards-grid {
      display: grid;
    }

    .cards-grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .cards-grid--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

:where(html:not([data-theme="dark"])) [data-component-id="usfq_theme:cards_carousel"] {
  .carousel-controls [data-component-id="usfq_theme:icon"].icon--color-black {
    color: var(--secondary) !important;
  }
}

:where(html[data-theme="dark"]) [data-component-id="usfq_theme:cards_carousel"] {

  .carousel-controls [data-component-id="usfq_theme:icon"].icon--color-black,
  .carousel-controls [data-component-id="usfq_theme:icon"].icon--color-white {
    color: var(--white) !important;
  }
}