.sdc-carousel {
  --sdc-carousel-visible: var(--sdc-carousel-per-view, 3);
  position: relative;
  width: 100%;
}

/* Static grid: used while editing and before Flickity initializes. */
.sdc-carousel:not(.is-carousel-active) > .sdc-carousel-track {
  display: flex;
  flex-wrap: wrap;
  min-height: 100px;
}

.sdc-carousel:not(.is-carousel-active) > .sdc-carousel-track > * {
  box-sizing: border-box;
  flex: 0 0 calc(100% / var(--sdc-carousel-visible));
  max-width: calc(100% / var(--sdc-carousel-visible));
  padding: 0.5em;
}

.sdc-carousel:not(.is-carousel-active) > .sdc-carousel-track > .nestable-placeholder {
  flex-basis: 100%;
  max-width: 100%;
}

.sdc-carousel .sdc-carousel-cell {
  box-sizing: border-box;
  width: calc(100% / var(--sdc-carousel-visible));
  padding: 0.5em;
}

.sdc-carousel.is-carousel-active[data-show-dots="true"] {
  margin-bottom: 2.5rem;
}

.sdc-carousel .flickity-prev-next-button.previous,
.sdc-carousel .flickity-prev-next-button.next {
  background: transparent;
}

.sdc-carousel .flickity-button:disabled {
  display: none;
}

.sdc-carousel .flickity-prev-next-button.previous {
  left: -40px;
}

.sdc-carousel .flickity-prev-next-button.next {
  right: -40px;
}

@media screen and (max-width: 1400px) {
  .sdc-carousel {
    --sdc-carousel-visible: min(var(--sdc-carousel-per-view, 3), 2);
  }
}

@media screen and (max-width: 800px) {
  .sdc-carousel {
    --sdc-carousel-visible: 1;
  }

  .sdc-carousel .flickity-prev-next-button.previous {
    left: 0;
  }

  .sdc-carousel .flickity-prev-next-button.next {
    right: 0;
  }
}