.media-grid { padding-block: var(--section-pad); }
.media-grid--pad-top { padding-bottom: 0; }
.media-grid--pad-bottom { padding-top: 0; }
.media-grid--pad-none { padding-block: 0; }
.media-grid {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
.media-grid__head { margin-bottom: var(--media-grid-head-gap, 28px); }
.media-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--media-grid-min, 240px), 1fr));
  gap: 16px;
}
.media-grid__note { margin-top: var(--media-grid-note-gap, 18px); }
.media-grid__item {
  margin: 0;
  background: rgba(var(--color-card-background));
  border: 1px solid rgba(var(--color-text), 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.media-grid__item img, .media-grid__item svg { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.media-grid__item figcaption { padding: 16px; color: rgba(var(--color-text)); font-size: 14px; line-height: 1.45; }
@media (max-width: 760px) {
  .media-grid__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .media-grid__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .media-grid__item figcaption { padding: 12px; font-size: 13px; }
}