/* Activity articles: readable text and media bounded by their actual aspect ratio. */
.activity-page-main .activity-hero-media {
  min-width: 0;
  padding: 16px;
  background: var(--cream);
  border-radius: 22px;
}
.activity-page-main .activity-hero-media img,
.activity-page-main .activity-hero-media video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(520px, 70vh);
  margin-inline: auto;
  object-fit: contain;
}
.activity-page-main .activity-facts { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; }
.activity-page-main .activity-facts li { padding: 20px; border-radius: 16px; background: var(--cream); }
.activity-page-main .activity-facts span { display: block; color: var(--muted); font-size: 15px; }
.activity-page-main .story-panel { max-width: 40em; margin-inline: auto; }
.activity-page-main .story-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  font-size: 17px;
}
.activity-page-main .story-columns article { padding: 24px; background: var(--card); border-radius: 16px; }
.activity-page-main .media-section-head { margin-bottom: 28px; }
.activity-page-main .activity-gallery,
.activity-page-main .activity-video-grid,
.activity-page-main .repair-process-grid,
.activity-page-main .before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.activity-page-main .activity-video-grid.single-media { grid-template-columns: minmax(0, 420px); justify-content: center; }
.activity-page-main .activity-video-grid.single-media.is-landscape { grid-template-columns: minmax(0, 860px); }
.activity-page-main :is(.activity-gallery, .activity-video-grid, .repair-process-grid, .before-after) figure {
  min-width: 0;
  padding: 16px;
  background: var(--card);
  border-radius: 22px;
}
.activity-page-main :is(.activity-gallery, .repair-process-grid, .before-after) img,
.activity-page-main .activity-video-grid video {
  width: 100%;
  height: auto;
  max-height: min(480px, 70vh);
  object-fit: contain;
  background: var(--cream);
}
@media (max-width: 700px) {
  .activity-page-main .activity-gallery,
  .activity-page-main .activity-video-grid,
  .activity-page-main .repair-process-grid,
  .activity-page-main .before-after,
  .activity-page-main .story-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .activity-page-main .story-columns { font-size: 16px; }
  .activity-page-main .activity-facts span { font-size: 14px; }
}