@keyframes slide-in-left {
  from {
    opacity: 1;
    translate: 100%;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}

@keyframes slide-in-right {
  from {
    opacity: 1;
    translate: -100%;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}

.wp-block-gallery.is-style-slider {
  display: flex;
  flex-direction: column;
  position: relative;
}

.wp-block-gallery.is-style-slider::before {
  background-color: var(--wp--preset--color--black);
  content: "";
  bottom: 50%;
  left: calc(-1 * var(--wp--preset--spacing--50));
  left: -1.25rem;
  position: absolute;
  right: calc(-1 * var(--wp--preset--spacing--50));
  right: -1.25rem;
  top: calc(-1 * var(--wp--preset--spacing--50) - 1px - 1.5rem);
}

.wp-block-gallery.is-style-slider .is-style-slider__wrapper {
  background-color: var(--wp--preset--color--light-gray);
  display: grid;
  overflow: hidden;
  width: calc((100% * 3 / 4) + 1.25rem);
}

.wp-block-gallery.is-style-slider .is-style-slider__wrapper:nth-child(2n + 1) {
  align-self: flex-start;
  translate: -1.25rem;
}
.wp-block-gallery.is-style-slider .is-style-slider__wrapper:nth-child(2n) {
  align-self: flex-end;
  translate: 1.25rem;
}

.wp-block-gallery.is-style-slider.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: 100%;
}
.wp-block-gallery.is-style-slider .wp-block-image {
  aspect-ratio: 516/400;
  grid-column: 1;
  grid-row: 1;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  translate: 0%;
}

.wp-block-gallery.is-style-slider .wp-block-image.is-style-slider__active {
  opacity: 1;
  translate: 0%;
  z-index: 10;
}
.wp-block-gallery.is-style-slider .wp-block-image.is-style-slider__slide-in-right {
  animation: slide-in-right 0.5s ease-in-out;
}
.wp-block-gallery.is-style-slider .wp-block-image.is-style-slider__slide-in-left {
  animation: slide-in-left 0.5s ease-in-out;
}

/* Buttons */
.wp-block-gallery.is-style-slider .is-style-slider__buttons {
  bottom: 50%;
  display: flex;
  position: absolute;
  right: calc(100% / 4);
  translate: 50%;
}
.wp-block-gallery.is-style-slider .is-style-slider__button-next,
.wp-block-gallery.is-style-slider .is-style-slider__button-prev {
  aspect-ratio: 1;
  background-color: var(--wp--preset--color--light-gray);
  background-image: var(--ep--icon--arrow-right);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  border: 0;
  cursor: pointer;
  transition: opacity 0.25s ease-in-out;
  width: 2.75rem;
}

.wp-block-gallery.is-style-slider .is-style-slider__button-prev {
  rotate: 180deg;
}

.wp-block-gallery.is-style-slider .is-style-slider__button-next:hover,
.wp-block-gallery.is-style-slider .is-style-slider__button-prev:hover {
  opacity: 0.5;
}

@media screen and (min-width: 782px) {
  .wp-block-gallery.is-style-slider {
    flex-direction: row;
  }

  .wp-block-gallery.is-style-slider::before {
    left: calc(-1 * var(--wp--preset--spacing--50) - 0.25rem);
    right: calc(-1 * var(--wp--preset--spacing--50) - 0.25rem);
  }

  .wp-block-gallery.is-style-slider .is-style-slider__wrapper {
    translate: 0;
    width: 50%;
  }
  .wp-block-gallery.is-style-slider .is-style-slider__wrapper:nth-child(2n),
  .wp-block-gallery.is-style-slider .is-style-slider__wrapper:nth-child(2n + 1) {
    translate: 0;
    width: 50%;
  }
  .wp-block-gallery.is-style-slider .is-style-slider__wrapper:nth-child(2n) {
    margin-bottom: 3.75rem;
  }
  .wp-block-gallery.is-style-slider .is-style-slider__wrapper:nth-child(2n + 1) {
    margin-top: 3.75rem;
  }

  .wp-block-gallery.is-style-slider .is-style-slider__buttons {
    bottom: 0%;
    right: 50%;
    translate: 50%;
  }

  .wp-block-gallery.is-style-slider .is-style-slider__button-next,
  .wp-block-gallery.is-style-slider .is-style-slider__button-prev {
    background-size: 2rem;
    width: 3.75rem;
  }
}