/* ===========================
   Youth Outreach
   =========================== */
body { margin:0; font-family: Arial, sans-serif; background:#fff; color:#000; }
.container-narrow { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* Header */
.yo-header { display:flex; align-items:center; }
.yo-title  { margin:0; padding:2.25rem 0 1.25rem; font-size:2.3rem; font-weight:800; text-transform:uppercase; letter-spacing:.01em; }
.yo-dot    { width:1.8rem; height:1.8rem; border-radius:50%; background:#0C8DB0; display:inline-block; margin-left:.6rem; }
.yo-rule   { border:none; border-top:1px solid #cfcfcf; margin:0 0 1.25rem; }

/* Intro */
.yo-intro p { line-height:1.75; color:#222; margin: .5rem 0 1.5rem; }
.yo-link { color:#0C8DB0; text-decoration:none; border-bottom:1px solid transparent; }
.yo-link:hover { border-bottom-color:#0C8DB0; }

/* Gallery */
.yo-gallery {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 10px 0 40px;
}
.yo-card { margin:0; }
.yo-card img {
  width:100%;
  aspect-ratio: 3/4;        /* consistent height like the mock */
  object-fit: cover;
  display:block;
}
.yo-card figcaption {
  font-size:.9rem;
  color:#222;
  line-height:1.5;
  margin-top:.6rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .yo-title { font-size:2rem; }
  .yo-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .container-narrow { padding: 0 1.25rem; }
  .yo-gallery { grid-template-columns: 1fr; }
}