/* CHAPTER 11 — WHAT WE ARE BUILDING NEXT */
.next { overflow: hidden; }
.next__media { position: absolute; inset: 0; }
.next__media video, .next__media img {
  position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; opacity: .32;
}
.next__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 10, .9) 0%, rgba(12, 12, 10, .55) 50%, rgba(12, 12, 10, .9) 100%);
}
.next__inner { position: relative; z-index: 1; }
.next .sec-head__main { grid-column: 1 / span 9; }
.next__board { border-top: 1px solid var(--hair-ink); }
.next__board li { border-bottom: 1px solid var(--hair-ink); }
.next__board a {
  display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 4fr);
  column-gap: 28px; align-items: center; padding: 22px 0;
  transition: padding-left .4s var(--ease);
}
.next__board a:hover { padding-left: 10px; }
.next__board .b-num { font-size: .7rem; font-weight: 500; letter-spacing: .22em; color: var(--gold); }
.next__board .b-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; }
.next__board .b-bar { height: 1px; background: var(--hair-ink); position: relative; }
.next__board .b-bar span { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left center; }
.next .media-pause { position: absolute; right: var(--pad); bottom: 24px; }
@media (max-width: 899px) {
  .next__board a { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .next__board .pill { justify-self: start; white-space: normal; }
}