:root{
  --accent: #8d8b00;
  --caption: #333399;
  --page-max: 1400px;
}

/* Page shell */
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.55;
  color:#111;
  background:#fff;
}
.page{
  max-width: var(--page-max);
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Headings */
h1{
  text-align:center;
  color: var(--accent);
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
  margin: 0 0 1.5rem;
  font-weight: 900;
}

/* Grid of videos */
.video-grid{
  display: grid;
  grid-template-columns: 1fr;
gap: 60px;
padding: 60px 0;
}
@media (min-width: 600px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .video-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Video cards */
.video-card{
  margin: 0;
}
.video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card figcaption{
  margin-top: .5rem;
  font-weight: 600;
  font-style: italic;
  color: var(--caption);
  text-align: center;
}