.story-photo {
  background-image: linear-gradient(90deg, transparent 75%, rgba(255,249,236,.16)), url('tui-as-puppy.jpg');
}

.parent-card { overflow: hidden; padding: 0 !important; }
.parent-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.parent-card div { padding: 1.25rem; }
.parent-card:nth-child(2) img { object-position: center 25%; }
.hero-image figcaption small { display: block; margin-top: .1rem; color: var(--muted); font-weight: 600; font-size: .68rem; }

.tui-gallery {
  grid-column: 1 / -1;
  background: var(--navy);
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: .9rem;
}

.gallery-heading {
  grid-column: span 2;
  background: var(--cream);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-heading h3 {
  font: 2.4rem/1.05 Georgia, serif;
  color: var(--navy);
  margin: .6rem 0 .8rem;
}

.gallery-heading p { color: var(--muted); margin: 0; max-width: 480px; }
.tui-gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 20px; background: #203b50; }
.tui-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tui-gallery figure:hover img { transform: scale(1.025); }
.tui-gallery figcaption { position: absolute; left: .8rem; bottom: .8rem; background: rgba(255,255,255,.92); color: var(--navy); border-radius: 999px; padding: .45rem .7rem; font-size: .75rem; font-weight: 800; }
.gallery-main { grid-row: span 2; }
.gallery-puppy { grid-column: span 2; }
.gallery-puppy img { object-position: center 43%; }

@media (max-width: 980px) {
  .tui-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
  .gallery-main { grid-row: span 2; }
}

@media (max-width: 640px) {
  .tui-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; padding: 1rem; gap: .65rem; }
  .gallery-heading { grid-column: 1 / -1; min-height: 250px; }
  .gallery-main { grid-column: 1 / -1; grid-row: auto; height: 300px; }
  .gallery-puppy { grid-column: 1 / -1; height: 280px; }
}

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