.media-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 11rem;
  grid-auto-flow: dense;
  gap: var(--space-sm);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-section) var(--container-pad);
}
.media-gallery__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo),
              border-radius var(--duration-normal) var(--ease-out-expo);
}
.media-gallery__item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-organic);
}
.media-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-normal) var(--ease-out-expo); }
.media-gallery__item:hover img { transform: scale(1.05); }
.media-gallery__item--lg { grid-column: span 2; grid-row: span 2; }
.media-gallery__item--sm { grid-column: span 1; grid-row: span 1; }
.media-gallery__item--wide { grid-column: span 2; grid-row: span 1; }

@media (max-width: 900px) {
  .media-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; }
  .media-gallery__item--lg { grid-column: span 2; grid-row: span 2; }
  .media-gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 520px) {
  .media-gallery { grid-template-columns: 1fr; grid-auto-rows: 11rem; }
  .media-gallery__item--lg { grid-column: span 1; grid-row: span 2; }
  .media-gallery__item--wide { grid-column: span 1; }
}