/* Slide 7, "Make every photo post-worthy": a fan of photos above and below the headline,
   a rule through the middle with one photo split across it, left of the rule without
   Duper and right of it with. */
.close {
  --w: clamp(104px, 13vw, 190px);
  position: relative;
  overflow: hidden;
  padding-block: 8px 96px;
}

.fan { position: relative; height: calc(var(--w) * 2 + 44px); }

/* Over the cards, so it runs down the split photo's seam like the slide. */
.fan-rule {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: 4px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--ink);
}
.fan-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--ink);
}
.fan-top .fan-rule { top: 0; height: calc(100% - 10px); }
.fan-top .fan-rule::after { bottom: -10px; }
.fan-bottom .fan-rule { bottom: 0; height: calc(100% - 10px); }
.fan-bottom .fan-rule::after { top: -10px; }

.card {
  position: absolute;
  left: 50%;
  width: var(--w);
  height: auto;
  aspect-ratio: 323 / 444;
  border-radius: calc(var(--w) * 0.1);
  overflow: hidden;
  object-fit: cover;
  box-shadow: 0 10px 30px -14px rgba(60, 30, 10, 0.45);
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-half { clip-path: inset(0 50% 0 0); }
.split-half-right { clip-path: inset(0 0 0 50%); }
/* The untouched side, flattened to read as a straight phone capture. */
.split-raw { filter: saturate(0.55) contrast(0.8) brightness(1.06); }

.fan-top .card { top: calc(var(--w) * 0.18); }
.fan-top .split { translate: -50% 0; }
.fan-top .c2 { translate: calc(-50% - var(--w) * 1.12) calc(var(--w) * 0.12); rotate: -20deg; }
.fan-top .c4 { translate: calc(-50% + var(--w) * 1.12) calc(var(--w) * 0.12); rotate: 20deg; }
.fan-top .c1 { translate: calc(-50% - var(--w) * 2.1) calc(var(--w) * 0.62); rotate: -40deg; }
.fan-top .c5 { translate: calc(-50% + var(--w) * 2.1) calc(var(--w) * 0.62); rotate: 40deg; }

.fan-bottom .card { bottom: calc(var(--w) * 0.18); }
.fan-bottom .split { translate: -50% 0; }
.fan-bottom .c2 { translate: calc(-50% - var(--w) * 1.12) calc(var(--w) * -0.12); rotate: 20deg; }
.fan-bottom .c4 { translate: calc(-50% + var(--w) * 1.12) calc(var(--w) * -0.12); rotate: -20deg; }
.fan-bottom .c1 { translate: calc(-50% - var(--w) * 2.1) calc(var(--w) * -0.62); rotate: 40deg; }
.fan-bottom .c5 { translate: calc(-50% + var(--w) * 2.1) calc(var(--w) * -0.62); rotate: -40deg; }

.fan-label {
  position: absolute;
  z-index: 1;
  font-size: clamp(18px, 1.8vw, 24px);
  rotate: -8deg;
  white-space: nowrap;
}
/* Against the split photo, beside the rule: under its untouched half up top, over its
   edited half below. The split card's far edge sits 1.555 card widths into the fan. */
.fan-top .fan-label { right: calc(50% + 14px); top: calc(var(--w) * 1.555 + 22px); }
.fan-bottom .fan-label { left: calc(50% + 14px); bottom: calc(var(--w) * 1.555 + 22px); }

.close-copy { text-align: center; padding-block: 36px 56px; }
.close-title { font-size: clamp(38px, 9.6vw, 80px); }
.close-title span { display: block; }
.close-title .close-make { color: var(--orange-text); }
.close .stores { margin-top: 32px; }