.section.editorial-carousel-container,
.fragment.editorial-carousel-container {
  max-width: var(--Layout-Page-Width, 90rem);
  margin-inline: auto;
}

.editorial-carousel-wrapper {
  /* this wrapper is added from eds */
  width: 100%;
}

.editorial-carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Carousel-Widget-Vertical-Gap, 2.5rem);
  width: 100%;

  &.swiper {
    overflow: visible;
  }

  & .editorial-carousel {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    gap: var(--Carousel-Insurance-Product-Gap, 1rem);

    & .editorial-carousel-card-wrapper {
      width: 100%;
    }
  }
}

@media (width < 768px) {
  .editorial-carousel-container {
    & .show-more-button {
      display: block;
    }

    & .scroll-indicator {
      display: none;
    }

    & .editorial-carousel {
      align-items: center;
      gap: var(--Carousel-Editorial-Gap-Vertical, 1.5rem);

      /* Each slide is width:100%, while the card has a fixed width: center it */
      & .editorial-carousel-card-wrapper {
        justify-content: center;
        align-items: center;
      }
    }
  }
}

@media (width < 400px) {
  .editorial-carousel-container {
    & .editorial-carousel {
      width: 100%;
    }
  }
}

/* Tablet Portrait */
@media (width >= 768px) {
  .editorial-carousel-container {
    align-items: flex-start;
    gap: var(--Carousel-Widget-Vertical-Gap, 3rem);

    & .show-more-button {
      display: none;
    }

    & .scroll-indicator {
      display: flex;
      align-self: center;
    }

    .editorial-carousel {
      flex-direction: row;
      width: 100%;
      align-items: stretch;
      margin-inline: 0;
      justify-content: flex-start;
      gap: 0;

      & .swiper-slide {
        height: auto;
        flex: 0 0 auto;
        width: auto;
        margin-inline-end: var(--Carousel-Insurance-Product-Gap-M-Tp, 0.5rem);

        & .editorial-carousel-card-container {
          flex: 1 1 auto;
          align-self: stretch;
        }

        &:last-child {
          margin-inline-end: 0;
        }
      }
    }

    &.no-scroll-indicator {
      .editorial-carousel {
        justify-content: flex-start;
      }
    }
  }
}

/* Tablet Landscape */
@media (width >= 1024px) {
  .editorial-carousel-container {
    align-items: flex-start;

    .editorial-carousel {
      & .swiper-slide {
        margin-inline-end: var(--Carousel-Insurance-Product-Gap, 1rem);
      }
    }
  }
}

/* Desktop Small */
@media (1200px <= width < 1440px) {
  .editorial-carousel-container {
    align-items: flex-start;

    .editorial-carousel {
      justify-content: flex-start;
    }

    &.no-scroll-indicator {
      .editorial-carousel {
        justify-content: flex-start;
      }
    }

    /* Scroll indicator always centered */
    & .scroll-indicator {
      align-self: center;
    }
  }
}

/* Desktop */
@media (width >= 1440px) {
  .editorial-carousel-container {
    align-items: flex-start;

    .editorial-carousel {
      justify-content: flex-start;
    }

    &.no-scroll-indicator {
      align-items: center;

      .editorial-carousel {
        justify-content: center;
      }
    }

    /* Scroll indicator always centered */
    & .scroll-indicator {
      align-self: center;
    }
  }
}