/* Eksisterende gallerivarianter. Profiler ændrer ikke dagbøgernes design. */
:where([data-gallery~="four"]) .diary-gallery,
.diary-photo-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
:where([data-gallery~="revised"]) .diary-gallery,
.diary-photo-grid { display:grid; margin:22px 0 30px; }

:where([data-gallery~="framed"]) .diary-gallery > a,
.diary-photo-grid a {
  display:block; aspect-ratio:1; overflow:hidden;
  border-radius:15px; background:#f2f2f2;
}
:where([data-gallery~="revised"]) .diary-gallery a { min-width:0; }
:where([data-gallery~="framed"]) .diary-gallery img,
.diary-photo-grid img { width:100%; height:100%; object-fit:cover; }
:where([data-gallery~="framed"]:not([data-gallery~="revised"])) .diary-gallery img {
  aspect-ratio:1; border-radius:15px;
}
.diary-photo-grid img { display:block; border-radius:15px; }
:where([data-gallery~="framed"]:not([data-gallery~="revised"])) .diary-gallery img[data-preserve-frame] {
  object-fit:contain; background:#f2f2f2;
}
:where([data-gallery~="revised"]) .diary-gallery a.illustration-link img { object-fit:contain; }
:where([data-gallery~="framed"]) .diary-gallery a:focus-visible,
.diary-photo-grid a:focus-visible { outline:3px solid #315e49; outline-offset:3px; }

:where([data-gallery~="legacy"]) .diary-gallery img {
  width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:15px; cursor:zoom-in;
}

:where([data-gallery="contain"]) .diary-gallery {
  --thumbnail-gap:16px; display:grid; gap:var(--thumbnail-gap); align-items:start;
}
:where([data-gallery="contain"]) .diary-gallery a.photo { display:block; min-width:0; }
:where([data-gallery="contain"]) .diary-gallery img {
  display:block; width:100%; height:auto; aspect-ratio:1 / 1;
  object-fit:contain; border-radius:var(--ferie-radius); background:var(--ferie-surface);
}

@media(max-width:700px) {
  :where([data-gallery~="four"]) .diary-gallery,
  .diary-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:360px) {
  :where([data-gallery~="framed"]:not([data-gallery~="revised"])) .diary-gallery,
  .diary-photo-grid { grid-template-columns:1fr; }
}
@media(max-width:350px) {
  :where([data-gallery~="revised"]) .diary-gallery { grid-template-columns:1fr; }
}