/* A matching still and silent film, with one treatment across all five cards. */
.foundation-discover-grid .foundation-motion {
  --foundation-film-filter: sepia(.14) saturate(.74) contrast(.96);
  --foundation-film-position: center;
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e8e5da;
}

.foundation-discover-grid .foundation-motion > .foundation-motion-poster,
.foundation-discover-grid .foundation-motion > .foundation-motion-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foundation-film-position);
  filter: var(--foundation-film-filter);
  transform: none;
  transition: none;
  pointer-events: none;
}

.foundation-motion-poster { z-index: 0; }
.foundation-motion-video { z-index: 1; opacity: 0; }
.foundation-motion.is-playing > .foundation-motion-video { opacity: 1; }

.foundation-discover-grid .foundation-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #bdb9a2;
  opacity: .1;
  pointer-events: none;
}

.foundation-motion[href="#chapter-9"] { --foundation-film-position: 65% center; }

.foundation-motion:focus-visible {
  outline: 2px solid #59664f;
  outline-offset: -3px;
}

@media (max-width: 600px) {
  .foundation-discover-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .foundation-discover-grid article > span,
  .foundation-discover-grid article > h3,
  .foundation-discover-grid article > p {
    margin-left: 20px;
    margin-right: 20px;
  }

  .foundation-discover-grid article > span { font-size: 10px; }
  .foundation-discover-grid h3 { font-size: 22px; line-height: 1.4; }
  .foundation-discover-grid p { font-size: 15px; line-height: 1.8; }
}

@media (prefers-reduced-motion: reduce) {
  .foundation-motion.is-playing > .foundation-motion-video { opacity: 0; }
}