.carousel-collections {
  --black: var(--color-black);
  --red: var(--color-red);
  --light-gray: var(--color-medium-gray);
  --white: var(--color-white);
  display: block;
  padding-block: clamp(2.4rem, 4.58333vw, 8.8rem);

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

    .carousel-collections__slider {
      display: flex;
      flex-direction: column;
      gap: clamp(1rem, 2.08333vw, 4rem);
      --slides-to-show: 1.3;
      --slide-gap: clamp(0.8rem, 0.83333vw, 1.6rem);
      --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: 2.2;
      }

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

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

    .carousel-collections__header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* padding-inline: clamp(2rem, 5.52083vw, 10.6rem); */
      max-width: 89.27083vw;
      width: 100%;
      margin: 0 auto;

      .carousel-collections__buttons {
        align-items: center;
      }

      .carousel-collections__title {
        position: relative;
        font-size: clamp(2rem, 1.66667vw, 3.2rem);
        font-weight: 700;
        color: var(--white);
        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;

        &:is(.is-cropped-background .carousel-collections__title) {
          color: var(--color-top-content-text);
        }

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

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

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

      .blaze-prev,
      .blaze-next {
        display: none;
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        position: static;
        /* margin: 0;
        width: clamp(3.6rem, 2.5vw, 4.8rem);
        height: clamp(3.6rem, 2.5vw, 4.8rem); */
        margin: unset;
        min-width: unset;
        min-height: unset;
        width: auto;
        height: fit-content;
        aspect-ratio: 1/1;
        padding: clamp(1.2rem, 0.83333vw, 1.6rem);
        aspect-ratio: 1/1;
        border-radius: clamp(0.8rem, 0.625vw, 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-next + .collection__view-all,
      .blaze-prev + .collection__view-all {
        margin-left: clamp(0.6rem, 0.41667vw, 0.8rem);
      }

      .collection__view-all :is(a):not(.link, .cta-with-margin) {
        margin-top: 0rem;
      }

      .collection__view-all--desktop {
        display: none;
      }

      @media screen and (min-width: 768px) {
        .collection__view-all--desktop {
          display: flex;
        }
      }
    }

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

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

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

            :is(a) {
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              text-decoration: none;

              &.carousel-collections__image-overlay::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(
                  180deg,
                  rgba(0, 0, 0, 0.1) 0%,
                  rgba(0, 0, 0, 0.3) 50%,
                  rgba(0, 0, 0, 0.7) 100%
                );
                z-index: 1;
                pointer-events: none;
              }

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

              .carousel-collections__image-desktop {
                display: none;
              }

              @media screen and (min-width: 768px) {
                .carousel-collections__image-desktop {
                  display: block;
                }

                .carousel-collections__image-mobile {
                  display: none;
                }
              }

              .carousel-collections__collection-title {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                color: var(--white);
                margin: 0;
                padding: clamp(1.2rem, 1.25vw, 2.4rem);
                z-index: 2;

                font-family: var(--font-family-primary);
                font-size: clamp(2.4rem, 1.66667vw, 3.2rem);
                font-style: normal;
                font-weight: 700;
                text-transform: uppercase;
                text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
              }
            }
          }
        }
        .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(--red);
              width: 6rem;
              height: 0.4rem;
            }
          }
        }

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

    .collection__view-all:not(.collection__view-all--mobile) {
      &:is(.is-cropped-background .collection__view-all) {
        color: var(--color-top-content-text);
      }
    }

    .collection__view-all--mobile {
      display: flex;

      &:is(.is-cropped-background .collection__view-all--mobile) {
        color: var(--color-bottom-content-text);
      }
    }

    @media screen and (min-width: 768px) {
      .collection__view-all--mobile {
        display: none;
      }
    }
  }
}