/* Заповнювач фото (issue #20) — до появи реальних знімків ліцею. */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--fs-meta-lg);
  text-align: center;
  padding: var(--space-5);
}

/* issue #20's spec приклад ставить aspect-ratio інлайновим style="" на
   кожному використанні — під CSP цього проєкту (script-src/style-src
   'self', без 'unsafe-inline', issue #12) інлайновий style="" блокується
   так само, як інлайновий <script>. Замість цього — набір утилітарних
   класів на типові співвідношення сторін; кожен новий випадок або бере
   готовий клас звідси, або додає сюди свій, а не пише style="aspect-ratio". */
.photo-slot--1-1 {
  aspect-ratio: 1;
}

.photo-slot--16-9 {
  aspect-ratio: 16 / 9;
}

.photo-slot--3-2 {
  aspect-ratio: 3 / 2;
}

.photo-slot--4-3 {
  aspect-ratio: 4 / 3;
}