sp-overflow-slider {
  --_sp-offset-x: var(--az-layout-padding-inline);
  --_sp-slide-width: calc(100% - (var(--_sp-offset-x, 1rem) * 2));
  --_sp-scrollbar-width: 0;

  position: relative;
  display: block;
}

.az-overflow-slides-container {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

.az-tile-slider-gallery-content {
  position: relative;
}

.az-tile-slider-gallery-previous {
  position: absolute;
  inset: 0 0 0 0;
}

.az-overflow-slides-container .slides,
.az-overflow-slider .wp-block-term-template,
.az-overflow-slider .wp-block-post-template {
  display: flex !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--_sp-offset-x);
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  align-items: stretch;

  &::-webkit-scrollbar {
    display: none;
  }
}

.az-overflow-slides-container .slides > *,
.az-overflow-slider .wp-block-term,
.az-overflow-slider .wp-block-post {
  flex: none;
  width: var(--_sp-slide-width);
  scroll-snap-align: start;
  scroll-margin-left: var(--_sp-offset-x);
  transition: opacity 0.4s;
}

.editor-styles-wrapper .az-overflow-slider {
  .wp-block-post-template {
    padding-inline: unset;
  }

  .az-overflow-slides-container {
    position: relative;
    left: 0;
    width: auto;
    margin-left: auto;
  }
}

@media screen and (min-width: 500px) {
  .az-overflow-slider {
    --_sp-slide-width: 48%;
  }
}

@media screen and (min-width: 1200px) {
  .az-overflow-slider {
    --_sp-offset-x: calc((100vw - var(--wp--custom--layout--wide)) / 2);
    --_sp-slide-width: 30%;
  }

  .az-overflow-slider .items-per-view-2,
  .az-overflow-slider .columns-2 {
    --_sp-slide-width: calc(var(--wp--custom--layout--wide) / 2 - 0.6rem);
  }

  .az-overflow-slider .items-per-view-3,
  .az-overflow-slider .columns-3 {
    --_sp-slide-width: calc(var(--wp--custom--layout--wide) / 3 - 0.75rem);
  }

  .az-overflow-slider .items-per-view-4,
  .az-overflow-slider .columns-4 {
    --_sp-slide-width: calc(var(--wp--custom--layout--wide) / 4 - 0.75rem);
  }

  .az-overflow-slider .items-per-view-5,
  .az-overflow-slider .columns-5 {
    --_sp-slide-width: calc(var(--wp--custom--layout--wide) / 5 - 0.75rem);
  }

  .az-overflow-slider .items-per-view-6,
  .az-overflow-slider .columns-6 {
    --_sp-slide-width: calc(var(--wp--custom--layout--wide) / 6 - 0.75rem);
  }
}