/* Google x YouTube — Kids' Safety Campaign */

/* The outdoor screen: as wide as the text and the sections under it */
.yts-hero { width: calc(100% - 40px); height: 407px; object-fit: cover; border-radius: 10px; }

/* Headings and text as on the other cases: Satoshi headings, lines of at most 760px */
.yts .case-section { gap: 32px; }
.yts .case-text { gap: 14px; }
.yts-copy { max-width: 760px; }
.yts-copy p { line-height: 1.45em; }
.yts-copy p + p { margin-top: 1em; }

/* The three animated posters, side by side, whole */
.yts-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.yts-poster { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }

/* The four 15-second films, square, in a row */
.yts-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; }
.yts-vimeo { aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.yts-vimeo iframe { width: 100%; height: 100%; border: 0; }

/* Overview: the text, the Family Link loop beside it */
.yts-intro { display: grid; grid-template-columns: minmax(0, 760px) 300px; align-items: center; justify-content: space-between; gap: 40px; width: 100%; }
.yts-tail { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

@media (max-width: 1199.98px) {
  .yts-intro { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
  .yts-films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .yts-hero { width: 100%; height: auto; aspect-ratio: 1; }
  .yts-posters { gap: 8px; }
  .yts-poster { border-radius: 6px; }
  .yts-films { gap: 8px; }
  .yts-intro { grid-template-columns: 1fr; gap: 20px; }
}