@import "@/styles/variables";

.relatedCards {
  color: $black;
  padding: 6.25rem 0;
  background-color: $grey-light;

  &.removePadding {
    padding: 0;
  }

  h1 {
    text-align: center;
  }

  footer {
    text-align: center;
  }

  .cards {
    padding-top: 2.25rem; // -1.5rem
    padding-bottom: 2.25rem; // -1.5rem

    :global(.swiper-slide) {
      padding-top: 1.5rem; // +1.5rem
      padding-bottom: 1.5rem; // +1.5rem
    }
  }

  &.leftFirst {
    padding-top: 3.75rem;
    padding-bottom: 0rem;
  }

  &.left {
    padding: 3.75rem 0;
  }

  &.leftFirst,
  &.left {
    h2 {
      text-align: left;
    }

    footer {
      text-align: left;
    }

    .cards {
      padding-top: 0; // -1.5rem
      padding-bottom: 0.5rem; // -1.5rem

      :global(.swiper-slide) {
        padding-top: 1.5rem; // +1.5rem
        padding-bottom: 1.5rem; // +1.5rem
      }
    }
  }
}