/* The studio section: three prints in a loose fan (prints.js). Each opens in the photo viewer. */
.prints-fan {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 36vw, 480px);
  margin-top: var(--space-6);
}
.prints-fan__print {
  grid-area: 1 / 1;
  width: clamp(140px, 16vw, 240px);
  padding: 10px 10px 30px;
  border: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(21, 23, 26, 0.12), 0 26px 48px -26px rgba(21, 23, 26, 0.5);
  cursor: zoom-in;
  will-change: transform;
}
.prints-fan__print:nth-child(2) { z-index: 2; }
.prints-fan__print img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prints-fan__print:focus-visible { outline: 2px solid var(--bluehour); outline-offset: 4px; }
/* motion off: the same fan, set still */
.prints-fan.is-static .prints-fan__print:nth-child(1) { transform: translateX(-62%) translateY(34px) rotate(-14deg); }
.prints-fan.is-static .prints-fan__print:nth-child(2) { transform: translateY(-8px); }
.prints-fan.is-static .prints-fan__print:nth-child(3) { transform: translateX(60%) translateY(40px) rotate(13deg); }

@media (min-width: 900px) {
  .studio { grid-template-rows: auto auto; align-items: start; }
  .studio__head { grid-column: 1 / span 6; grid-row: 1; }
  .studio__body { grid-column: 1 / span 5; grid-row: 2; }
  .prints-fan { grid-column: 7 / -1; grid-row: 1 / span 2; margin-top: 0; }
}