:root {
  color-scheme: dark;
  background: #202221;
  --paper: #f7f6f2;
  --print-width: min(36vw, 51vh, 540px);
  --print-width: min(36vw, 51svh, 540px);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at 48% 40%, #343733 0%, #252725 52%, #1b1d1c 100%);
  background-attachment: fixed;
}

.collage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(2, var(--print-width));
  justify-content: center;
  align-content: center;
  gap: 4vh 5vw;
  gap: 4svh 5vw;
  padding: 5vh 5vw;
  padding: 5svh 5vw;
}

.slide {
  --angle: -4deg;
  --shift-x: -1%;
  --shift-y: 1%;
  display: grid;
  place-items: center;
  min-width: 0;
}

.slide:nth-child(2) {
  --angle: 3deg;
  --shift-x: 1%;
  --shift-y: -2%;
}

.slide:nth-child(3) {
  --angle: 2deg;
  --shift-x: 2%;
  --shift-y: 1%;
}

.slide:nth-child(4) {
  --angle: -3.5deg;
  --shift-x: -1%;
  --shift-y: 2%;
}

.print {
  width: var(--print-width);
  margin: 0;
  padding: 2.8% 2.8% 11%;
  background: var(--paper);
  border-radius: 1px;
  box-shadow:
    0 2px 3px rgb(0 0 0 / 26%),
    0 12px 20px -7px rgb(0 0 0 / 38%),
    2px 28px 38px -15px rgb(0 0 0 / 48%),
    inset 0 0 0 1px rgb(255 255 255 / 58%);
  transform: translate(var(--shift-x), var(--shift-y)) rotate(var(--angle));
}

.print img {
  display: block;
  width: 100%;
  height: auto;
  background: #343733;
}

/* На телефоне каждый снимок занимает собственный экран, включая landscape. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 600px) {
  :root {
    --print-width: min(82vw, 92vh, 560px);
    --print-width: min(82vw, 92svh, 560px);
    scroll-snap-type: y mandatory;
  }

  .collage {
    display: block;
    padding: 0;
  }

  .slide {
    height: 100vh;
    height: 100svh;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .print {
    /* Проценты рамки считаются от ширины снимка, а не всего экрана. */
    padding: calc(var(--print-width) * 0.028) calc(var(--print-width) * 0.028) calc(var(--print-width) * 0.11);
    transform: rotate(var(--angle));
  }
}