.media-gallery .events-section-heading {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.media-gallery .events-section-heading p {
  max-width: 780px;
}

.media-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-gallery-entry {
  min-width: 0;
}

.media-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  background: #d5eaf5;
  aspect-ratio: 4 / 3;
  color: #fff;
}

.media-gallery-item:hover {
  color: #fff;
  text-decoration: none;
}

.media-gallery-item:focus-visible {
  border-radius: 1rem;
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.media-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-gallery-item--video {
  background: #05080b;
}

.media-gallery-item--video > img,
.media-gallery-item--video:hover > img,
.media-gallery-item--video:focus-visible > img {
  background: #05080b;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .media-gallery-item--photo {
    cursor: zoom-in;
  }
}

.media-gallery-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(5, 8, 11, 0.74);
  color: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.media-gallery-item--video:hover .media-gallery-play,
.media-gallery-item--video:focus-visible .media-gallery-play {
  border-color: #fff;
  background: rgba(5, 8, 11, 0.9);
}

@media (min-width: 340px) {
  .media-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .media-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .media-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 419px) {
  .media-gallery-play {
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-gallery-play {
    transition: none;
  }
}