* {
  box-sizing: border-box;
}

body {
  background: #191919;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 0;
}
.boxes {
  position: relative;
  width: 100vw;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  min-width: 200px;
  min-height: 200px;
  display: none;
}
.box img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 40px #000a;
}
.controls {
  position: absolute;
  bottom: 5vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2vw;
}
.controls button {
  border: none;
  background: #e5e5e5;
  border-radius: 16px;
  padding: 24px 40px;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s;
  box-shadow: 0 2px 8px #0008;
  display: flex;
  align-items: center;
}
.controls button:hover {
  background: #bbb;
}

body
  display grid
  place-items center
  min-height 100vh
  padding 0
  margin 0
  overflow-y hidden
  background var(--bg)

.drag-proxy
  visibility hidden
  position absolute

.controls
  position absolute
  top calc(50% + clamp(var(--min-size), 20vmin, 20vmin))
  left 50%
  transform translate(-50%, -50%) scale(1.5)
  display flex
  justify-content space-between
  min-width var(--min-size)
  height 44px
  width 20vmin
  z-index 300

button
  height 48px
  width 48px
  border-radius 50%
  position absolute
  top 0%
  outline transparent
  cursor pointer
  background none
  appearance none
  border 0
  transition transform 0.1s
  transform translate(0, calc(var(--y, 0)))


  &:before
    border 2px solid hsl(0, 0%, 90%)
    background linear-gradient(hsla(0, 0%, 80%, 0.65), hsl(0, 0%, 0%)) hsl(0, 0%, 0%)
    content ''
    box-sizing border-box
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    height 80%
    width 80%
    border-radius 50%

  &:active:before
    background linear-gradient(hsl(0, 0%, 0%), hsla(0, 0%, 80%, 0.65)) hsl(0, 0%, 0%)

  &:nth-of-type(1)
    right 100%

  &:nth-of-type(2)
    left 100%

button span
  position absolute
  width 1px
  height 1px
  padding 0
  margin -1px
  overflow hidden
  clip rect(0, 0, 0, 0)
  white-space nowrap
  border-width 0

button:hover
  --y -5%


button svg
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%) rotate(0deg) translate(2%, 0)
  height 30%
  fill hsl(0, 0%, 90%)

button:nth-of-type(1) svg
  transform translate(-50%, -50%) rotate(180deg) translate(2%, 0)

.scroll-icon
  height 30px
  position fixed
  top 1rem
  right 1rem
  color hsl(0, 0%, 90%)
  animation action 4s infinite

@keyframes action
  0%, 25%, 50%, 100%
    transform translate(0, 0)
  12.5%, 37.5%
    transform translate(0, 25%)

.boxes
  height 100vh
  width 100%
  overflow hidden
  position absolute
  transform-style preserve-3d
  perspective 800px
  touch-action none

.box
  transform-style preserve-3d
  position absolute
  top 50%
  left 50%
  height 20vmin
  width 20vmin
  min-height var(--min-size)
  min-width var(--min-size)
  display none

  &:after
    content ''
    position absolute
    top 50%
    left 50%
    height 100%
    width 100%
    background-image var(--src)
    background-size cover
    transform translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin)
    opacity 0.75

  &:before
    content ''
    position absolute
    top 50%
    left 50%
    height 100%
    width 100%
    background linear-gradient(var(--bg) 50%, transparent)
    transform translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin) scale(1.01)
    z-index 2


  img
    position absolute
    height 100%
    width 100%
    top 0
    left 0
    object-fit cover


  &:nth-of-type(odd)
    background hsl(90, 80%, 70%)

  &:nth-of-type(even)
    background hsl(90, 80%, 40%)

@supports(-webkit-box-reflect: below)
  .box
    -webkit-box-reflect below 0.5vmin linear-gradient(transparent 0 50%, white 100%)

    &:after
    &:before
      display none