.slides {
  display: grid;
  width: 100%;
  height: 350px;
}
.slides > .slide {
  grid-area: 1 / -1;
  width: auto;
  height: 350px;
}
.slides > button {
  appearance: none;
  background: transparent;
  border: none;
  color: white;
  position: absolute;
  font-size: 5rem;
  width: 5rem;
  height: 5rem;
  top: 30%;
  transition: opacity 0.3s;
  opacity: 0.7;
  z-index: 5;
}

.slides > button:hover {
  opacity: 1;
}

.slides > button:focus {
  outline: none;
}
.slides > button:first-child {
  left: 5%;
}
.slides > button:last-child {
  right: 5%;
}

.slideContent {
  width: 10vw;
  height: 350px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease-in-out;
  opacity: 0.7;
  display: grid;
  align-content: center;
  transform-style: preserve-3d;
  transform: perspective(1000px) translateX(calc(100% * var(--offset)))
    rotateY(calc(-45deg * var(--dir)));
}

@media screen and (max-width: 768px) {
  .slideContent {
    width: 32vw;
    height: 300px;
  }
  .slides {
    height: 300px;
  }
  .slides > .slide {
    height: 300px;
    margin-left: -20px;
  }
}

.slideContentInner {
  transform-style: preserve-3d;
  transform: translateZ(2rem);
  transition: opacity 0.3s linear;
  text-shadow: 0 0.1rem 1rem #000;
  opacity: 0;
}

.slideContentInner > .slideSubtitle,
.slideTitle {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 0.2ch;
  text-transform: uppercase;
  margin: 0;
}

.slideContentInner > .slideSubtitle::before {
  content: "— ";
}
.slideContentInner > .slideDescription {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.2ch;
}
.slide[data-active] {
  z-index: 2;
  pointer-events: auto;
}

.slide[data-active] > .slideBackground {
  opacity: 0.2;
  transform: none;
}

.slide[data-active] > .slideContentInner {
  opacity: 1;
}

.slide[data-active] > .slideContent {
  --x: calc(var(--px) - 0.5);
  --y: calc(var(--py) - 0.5);
  opacity: 1;
  transform: perspective(1000px);
}

.slide[data-active] > .slideContent:hover {
  transition: none;
  transform: perspective(1000px) rotateY(calc(var(--x) * 45deg))
    rotateX(calc(var(--y) * -45deg));
}