/* ---------- The next chapter (Figma: white 2787->3762; brand video 1008x567 straddles into the black section) ---------- */
.next { display: flow-root; background: var(--c-white); color: var(--c-black); padding-top: 227.2px; }
.next__grid { display: grid; grid-template-columns: 516.8px minmax(0, 1fr); column-gap: 289.5px; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; align-items: start; }
.next__title { max-width: 435px; margin-bottom: 30.6px; }
.next__copy { font-size: var(--fs-body); line-height: var(--lh-auto); }
.next__copy p + p { margin-top: 19px; }
.next__aside { margin-top: 50.2px; max-width: 511px; }
.next__block + .next__block { margin-top: 19.7px; padding-top: 19.7px; border-top: 1px solid #ccc; }
.next__label { display: block; margin-bottom: 7px; }
.next__text { font-size: var(--fs-body-sm); line-height: 28px; max-width: 499px; }
.next__text strong { font-weight: 700; }

.next__media { position: relative; z-index: 3; width: min(1008.8px, 100% - 2 * var(--gutter)); margin: 83.5px auto -181.2px; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.next__media video, .next__media img { width: 100%; height: 100%; object-fit: cover; }

/* Yellow grid band across the top of the black area */
.grid-band { position: absolute; inset: 0 0 auto 0; height: 103.25px; z-index: 1; pointer-events: none;
  background: url("../../img/grid-yellow.svg") 6.79px 14.73px / 33.98px 33.98px repeat; }

@media (max-width: 1100px) {
  .next__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .next__aside { margin-top: 0; }
}
@media (max-width: 767px) {
  .next { padding-top: 72px; }
  .next__media { margin-top: 48px; margin-bottom: -96px; }
  .grid-band { height: 68px; background-size: 22px 22px; background-position: 4.4px 9.5px; }
}