/* Next studies: the dark container at the end of every case study, a route into the OTHER case studies. Two cards side by side (stacked on a phone). Each card, top to bottom: the company name in the meta lock-up (the light-first label variant, instead of a role), the case study's title in 5th Avenue (H2 display), the usual CTA and, under it, a dithered picture (the
   landing page's dither, a <dither-scroll> with one slide, in the section's greys) (the light button, because the container is dark). Put it in .case-body as the last section; list the case studies the page is NOT about.
   <section class="cs-section cs-section--full cs-section--dark next-studies" aria-label="More case studies">
     <div class="cs-section__inner next-studies__grid">
       <article class="next-study">
         <dither-scroll class="next-study__dither" ui="false" reveal="false" aria-label="…" config='{"SCROLL_MODE":"external","BACKGROUND":"#3F3F3F","INK":"#D9D9D9","HALO_OVERLAY":true}'>
           <dither-slide src="assets/images/luno_ascii.png" title="Luno" alt="…" fit="0.9" reveal="false"></dither-slide>
         </dither-scroll>
         <p class="lockup__meta lockup__meta--solo"><strong>Luno</strong></p>
         <h2 class="next-study__title t-h2-display">Title of the case study</h2>
         <a class="button button--light" href="case-study.html">Case study <svg …></svg></a>
       </article> … </div></section>
   BACKGROUND must match the section colour (--color-case-dark, #3F3F3F); INK is the light grey the dark sections use (#D9D9D9). */
.next-studies__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: 62px; row-gap: 30px; }   /* 4 rows: lock-up, title, button, picture (the cards share them, so the pictures and buttons line up even when one title is longer) */
.next-study { display: grid; grid-template-rows: subgrid; grid-row: span 4; justify-items: start; row-gap: 30px; min-width: 0; }
.next-study__dither { display: block; width: 100%; height: 360px; }
.next-study > .lockup__meta { margin: 0; }
.next-study__title { margin: 0; color: var(--color-type-sample); text-wrap: balance; }
@media (max-width: 900px) { .next-studies__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--space-8); } .next-study { grid-row: auto; grid-template-rows: none; } .next-study__dither { height: 300px; } }