/* ==========================================================================
   Lydstudie, Om Unilyd, Kontakt og 404 (pages/lyd-musikproduktion.html,
   pages/om-unilyd.html, pages/kontakt.html, pages/404.html).
   Kun det, der ikke findes i site.css. Klasserne starter med "om-".
   ========================================================================== */

/* Bredt billede i et galleri (fx nederste række på lydsiden).
   16:9 på mobil, 21:9 på computer. */
.om-ratio-wide img { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .om-ratio-wide img { aspect-ratio: 21 / 9; }
}

/* Linkliste (404 og "Det laver vi" på Om-siden). Hele rækken er klikbar via linket (min. 44 px høj). */
.om-links > div { position: relative; }
.om-links dt a {
  text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 1.5px; text-underline-offset: .25em;
}
.om-links dt a::after { content: ""; position: absolute; inset: 0; }
.om-links > div:hover dt a { text-decoration-thickness: 2px; }

/* Kontakt: to spalter. Kontaktpersonen (bred) og adressen med firmaoplysninger
   med små bogstaver under. På mobil står de under hinanden, adskilt af en streg. */
.om-contact-cols { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .om-contact-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); }
}
@media (max-width: 899.98px) {
  .om-contact-cols > * + * { padding-top: 28px; border-top: 1px solid var(--rule); }
}
.om-firm { margin-top: 28px !important; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.55; color: var(--fg-muted); }

/* Kontakt: "Det er godt at sende med" i fire spalter */
.om-sendlist { --cols: 4; }