.gallery-collage {
  --gallery-gap: 9px;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  gap: var(--gallery-gap);
  align-items: start;
}
.gallery-collage .gallery-frame {
  grid-column: span 1;
  grid-row: auto;
}
.gallery-collage .gallery-frame-landscape:nth-child(9n + 1),
.gallery-collage .gallery-frame-landscape:nth-child(9n + 6) {
  grid-column: span 2;
}
.gallery-collage .gallery-frame picture,
.gallery-collage .gallery-frame img {
  height: auto;
}
.gallery-collage .gallery-frame img {
  object-fit: contain;
  transform: none;
}
.gallery-collage[data-layout-ready] {
  grid-auto-rows: 1px;
  row-gap: 0;
}
.gallery-collage[data-layout-ready] .gallery-frame {
  margin-bottom: var(--gallery-gap);
}
@media (min-width: 600px) {
  .gallery-collage {
    --gallery-gap: 14px;
  }
  .gallery-collage .gallery-frame {
    grid-column: span 2;
  }
  .gallery-collage .gallery-frame-landscape:nth-child(9n + 1) {
    grid-column: span 4;
  }
  .gallery-collage .gallery-frame-landscape:nth-child(9n + 6) {
    grid-column: span 2;
  }
  .gallery-collage .gallery-frame-landscape:nth-child(9n + 9) {
    grid-column: span 4;
  }
}

.media-files {
  display: grid;
  gap: 0 28px;
  margin-top: 24px;
}
.gallery-main > .media-files + .gallery-collage {
  margin-top: 24px;
}
.media-file {
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line, #383333);
}
.media-file-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.media-file-heading > div {
  min-width: 0;
}
.media-file h3 {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.media-file-kind {
  color: var(--muted);
  font-size: 11px;
}
.media-download {
  flex: 0 0 auto;
}
.media-file video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 440px;
  background: #000;
  object-fit: contain;
}
.media-file audio {
  display: block;
  width: 100%;
  height: 54px;
}
.media-file-caption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (min-width: 900px) {
  .media-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .media-file-heading { align-items: flex-start; flex-direction: column; }
}