.carousel-brands {
  --black: var(--color-black);
  --red: var(--color-red);
  --light-gray: var(--color-medium-gray);
  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__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);

      @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-tertiary);
        margin: 0;
        padding: 0;
        padding-left: clamp(1.6rem, 1.25vw, 2.4rem);
        line-height: 1.1;
        max-width: inherit;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          transform: translate(-50%);
          border-radius: 0.8rem;
          width: clamp(0.4rem, 0.41666vw, 0.8rem);
          background-color: var(--color-red);

          @media screen and (min-width: 1024px) {
            top: -8px;
            bottom: -8px;
          }
        }
      }

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

        &:has(.blaze-prev[disabled='true']):has(.blaze-next[disabled='true']) {
          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 {
      .blaze-track-container {
        padding-inline: clamp(2rem, 5.52083vw, 10.6rem);

          @media screen and (min-width: 1440px) {
            padding-inline: 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%;
            }
          }
        }
        .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-red);
              width: 6rem;
              height: 0.4rem;
            }
          }
        }

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