.carousel-brands.small-cards {
  --image-text-gap: clamp(0.9rem, 0.625vw, 1.2rem);
}

.carousel-brands {
  --black: var(--color-black);
  --red: var(--color-blue);
  --light-gray: var(--color-medium-gray);
  --image-text-gap: clamp(0.9rem, 0.83333vw, 1.6rem);
  display: block;
  padding-block: 3.2rem;

  @media screen and (min-width: 1440px) {
    padding-block: clamp(1.2rem, 1.25vw, 2.4rem);
    padding-inline: clamp(2rem, 5.52083vw, 10.6rem);
  }

  &.carousel-brands--collection-banner {
    padding-block: clamp(1.2rem, 1.77083vw, 3.4rem);

    @media screen and (min-width: 768px) {
      position: relative;

      &::before, &::after {
        content: '';
        position: absolute;
        left: 50%;
        width: 89.27083%;
        background-color: #E4E4E4;
        height: 2px;
        transform: translateX(-50%);
      }

      &::before {
        top: 0;
      }

      &::after {
        bottom: 0;
      }
    }
  }

  .carousel-brands__container {
    display: flex;
    flex-direction: column;

    .carousel-brands__slider {
      display: flex;
      flex-direction: column;
      gap: clamp(1rem, 2.08333vw, 4rem);
      --slides-to-show: 1.75;
      --slide-gap: clamp(1.6rem, 1.66667vw, 3.2rem);
      --slide-width: calc(
        (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) /
          var(--slides-to-show)
      );

      @media screen and (min-width: 768px) {
        --slides-to-show: 3.5;
      }

      @media screen and (min-width: 1024px) {
        --slides-to-show: 5.5;
      }

      @media screen and (min-width: 1440px) {
        --slides-to-show: 8;
      }
    }

    .carousel-brands__header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: clamp(2rem, 5.52083vw, 10.6rem);
      margin-bottom: 1.2rem;

      @media screen and (min-width: 1440px) {
        padding-inline: 0;
      }

      .carousel-brands__title {
        position: relative;
        font-size: clamp(2rem, 1.66667vw, 3.2rem);
        font-weight: 700;
        color: var(--black);
        font-family: var(--font-family-primary);
        margin: 0;
        padding: 0;
        line-height: 1;
        height: fit-content;
        max-width: inherit;

        &::before {
          content: '';
          position: absolute;
          bottom: -12px;
          left: 0;
          transform: translateY(-50%);
          border-radius: 0.8rem;
          width: 4rem;
          height: 0.4rem;
          background-color: var(--color-cyan);
        }
      }

      .blaze-buttons {
        display: flex;
        gap: clamp(0.6rem, 4vw, 0.8rem);

        &:has(.blaze-prev[disabled]):has(.blaze-next[disabled]) {
          display: none;
        }
      }

      .blaze-prev,
      .blaze-next {
        display: none;
        position: static;
        margin: 0;
        width: clamp(3.6rem, 2.5vw, 4.8rem);
        height: clamp(3.6rem, 2.5vw, 4.8rem);
        aspect-ratio: 1/1;
        border-radius: 1.2rem;
        color: var(--black);
        background-color: var(--light-gray);
        /* padding: 1.6rem; */
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;

        @media screen and (min-width: 768px) {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        :is(svg) {
          width: clamp(1.2rem, 0.83333vw, 1.6rem);
          height: clamp(1.2rem, 0.83333vw, 1.6rem);
        }
      }

      .blaze-prev[disabled],
      .blaze-next[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
      }

      .blaze-prev {
        transform: rotate(180deg);
      }

      .blaze-next {
        transform: rotate(0deg);
      }
    }

    .blaze-container {
      overflow: hidden;
      .blaze-track-container {
        overflow: hidden;
        padding-left: clamp(2rem, 5.52083vw, 10.6rem);

        @media screen and (min-width: 767px) {
          padding-left: 0;
          margin-left: clamp(2rem, 5.52083vw, 10.6rem);
          margin-right: clamp(2rem, 5.52083vw, 10.6rem);
        }

        @media screen and (min-width: 1440px) {
          margin-left: 0;
          margin-right: 0;
        }

        .blaze-track {
          display: flex;
          gap: var(--slide-gap);

          .blaze-slide {
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            width: var(--slide-width);

            :is(img) {
              width: 100%;
            }

            :is(p) {
              text-align: center;
              font-size: clamp(1.2rem, 0.83333vw, 1.6rem);
              font-weight: 500;
              line-height: 1;
              margin-top: 1.2rem;
              color: var(--color-black-secondary);
              margin: 0;
              margin-top: var(--image-text-gap);
            }

            :is(a) {
              text-decoration: none;
            }
          }
        }
        .blaze-pagination {
          display: flex;
          justify-content: center;
          margin-top: 2.4rem;
          margin-bottom: 1.6rem;
          gap: 0.4rem;
          flex-wrap: wrap;

          :is(button) {
            background-color: var(--color-medium-gray);
            transition: all 0.3s ease;
            opacity: 1;
            width: 2.4rem;
            height: 0.4rem;
            margin: 0;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            font-size: 0;
            text-indent: -9999px;
            overflow: hidden;

            &.active {
              background-color: var(--color-blue);
              width: 6rem;
              height: 0.4rem;
            }
          }
        }

        @media screen and (min-width: 768px) {
          .blaze-pagination {
            display: none;
          }
        }
      }
    }
  }
}