.relative-container {
  .page-width {
    padding: 0 2rem;
    overflow: hidden;
    max-width: 1740px;

    @media screen and (min-width: 750px) {
      padding: 0 3.5rem;
    }
    @media screen and (min-width: 1440px) {
      padding: 0 12rem;
      overflow: hidden;
      max-width: 1740px;
    }
  }
}

.relative-products-section {
  background-color: var(--color-white);

  .swiper {
    overflow: visible;
    .swiper-slide {
      height: auto;
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: -120px;
      width: 120px;
      height: 100%;
      background-color: var(--color-white);
      z-index: 2;
    }
    &:after {
      content: "";
      position: absolute;
      top: 0;
      right: -120px;
      width: 120px;
      height: 100%;
      background-color: var(--color-white);
      z-index: 2;
    }
  }

  .swiper-wrapper {
    padding-top: 20px;
    @media screen and (max-width: 990px) {
      padding-bottom: 60px;
    }
    @media screen and (max-width: 1439px) {
      padding-bottom: 100px;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    @media screen and (max-width: 990px) {
      width: 50px;
      height: 50px;
    }
  }

  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    @media screen and (max-width: 1439px) {
      bottom: 0;
      right: 0;
      top: inherit;
    }
    @media screen and (min-width: 1440px) {
      right: -95px;
    }
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    @media screen and (max-width: 1439px) {
      bottom: 0;
      left: 0;
      top: inherit;
    }
    @media screen and (min-width: 1440px) {
      left: -95px;
    }
  }
}

.related-products__heading {
  margin: 0 0 3rem;
  text-align: center;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -2.5px;
  margin: 0 0 30px;
  text-transform: lowercase;
  @media screen and (min-width: 1024px) {
    font-size: 89px;
    line-height: 84px;
    margin: 0 0 55px;
  }
}