.recommended-products {
  & .recommended-products__container {
    padding-top: var(--recommended-products-padding-top-mobile);
    padding-bottom: var(--recommended-products-padding-bottom-mobile);
  }

  & .recommended-products__heading {
    font-size: 28px;
    line-height: 140%;
    margin: 0;
    text-align: center;
  }

  & .recommended-products__swiper {
    margin: 0 -15px 0;
    margin-top: 30px;
    padding: 0 15px;
  }

  & .recommended-products__slide {
    height: auto;

    & .card__container {
      max-width: 100%;
    }

    & .card__content {
      max-width: 100%;
      width: 100%;
      margin-inline: 0;
    }

    & .card-information {
      margin-bottom: 16px;
    }

    & .card__quick-add {
      margin-top: auto;
    }

    & .quick-add__submit {
      gap: 16px;
    }
  }

  & .product-card-wrapper {
    --product-card-corner-radius: 15px;

    & .card__heading {
      font-size: 18px;
    }

    & .button {
      font-size: 14px;
      font-weight: 500;
      min-height: 40px;
    }
  }

  @media screen and (min-width: 750px) {
    & .recommended-products__swiper {
      margin: 0 -40px 0;
      margin-top: 40px;
      padding: 0 40px;
    }
  }

  @media screen and (min-width: 769px) {
    & .recommended-products__container {
      padding-top: var(--recommended-products-padding-top-desktop);
      padding-bottom: var(--recommended-products-padding-bottom-desktop);
    }

    & .recommended-products__heading {
      font-size: 40px;
    }

    & .recommended-products__swiper {
      margin-top: 40px;
    }

    & .recommended-products__swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    & .product-card-wrapper {
      --product-card-corner-radius: 30px;

      & .card__heading {
        font-size: 20px;
      }

      & .button {
        font-size: 16px;
        min-height: 43px;
      }
    }
  }

  @media screen and (min-width: 1000px) {
    & .recommended-products__swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
  }
}