.related-products {
  --black: var(--color-black);
  --red: var(--color-red);
  --light-gray: var(--color-medium-gray);
  display: block;
  padding-block: 3.2rem;
  padding-left: 2rem;

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

  .related-products__container {
    display: flex;
    flex-direction: column;

    .related-products__slider {
      display: flex;
      flex-direction: column;
      gap: clamp(1rem, 2.08333vw, 4rem);
      --slides-to-show: 1.75;
      --slide-gap: 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: 2;
      }

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

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

    .related-products__header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

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

      .related-products__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);
      }

      .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);
        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;
        :is(svg) {
          color: var(--color-black);
          opacity: 0.5;
        }
      }

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

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

      .related-products__view-all {
        margin-left: 1rem;
        display: none;
        justify-content: center;
        position: relative;
        background: transparent;
        width: fit-content;
        border-radius: 0.75rem;
        border-bottom-left-radius: 0;
        border: 0.4rem solid var(--color-red);
        color: rgb(var(--color-text));
        transition: transform 0.3s ease, filter 0.3s ease;

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

        &:hover {
          transform: translateY(-0.4rem);
          filter: brightness(1.2);
        }

        :is(a) {
          margin-top: 0;
          color: inherit;
          background: none;
          padding-inline: clamp(1.6rem, 1.14583vw, 2rem);
          padding-block: clamp(0.8rem, 0.625vw, 1.2rem);
          font-size: clamp(1.6rem, 1.14583vw, 2rem);
          font-weight: 700;
          text-transform: uppercase;
          text-decoration: none;
          min-height: unset;
          line-height: 1;
          white-space: nowrap;
        }
      }
    }

    .blaze-container {
      .blaze-track-container {

        @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);

            .card__inner {
              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(--light-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;
          }
        }
      }
    }
  }

  .related-products__view-all--mobile {
    display: none;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    position: relative;
    background: transparent;
    width: fit-content;
    border-radius: 0.75rem;
    border-bottom-left-radius: 0;
    border: 0.4rem solid var(--color-red);
    color: rgb(var(--color-text));
    transition: transform 0.3s ease, filter 0.3s ease;

    &:hover {
      transform: translateY(-0.4rem);
      filter: brightness(1.2);
    }

    .button {
      position: relative;
      color: inherit;
      background: none;
      padding-inline: clamp(1.6rem, 1.14583vw, 2rem);
      padding-block: clamp(0.8rem, 0.625vw, 1.2rem);
      font-size: clamp(1.6rem, 1.14583vw, 2rem);
      font-weight: 700;
      text-transform: uppercase;
      text-decoration: none;
      min-height: unset;
      line-height: 1;
    }
  }

  @media screen and (max-width: 750px) {
    .related-products__header .blaze-buttons {
      display: none;
    }

    .related-products__header .related-products__view-all {
      display: none;
    }

    .related-products__view-all--mobile {
      display: block;
    }
  }
}