Multi column article

by phloe

HTML

<link rel="stylesheet" href="https://www.dr.dk/global/publik.css">
<article>
  <h2>
    <span>Kevin Spacey skal betale:</span> 205 millioner efter beskyldninger om overgreb
  </h2>
  <div class="body">
    <figure>
      <img src="https://asset.dr.dk/imagescaler/?protocol=https&server=www.dr.dk&file=%2Fimages%2Fcrop%2F2021%2F11%2F23%2F1637657807_scanpix-20171204-195439-a.jpg&scaleAfter=crop&quality=70&w=720&h=405" />
      <figcaption>Kevin Spacey spillede med i fem ud af seks sæsoner af 'House of Cards'. (Foto: Mario Anzuoni © Scanpix Denmark)</figcaption>
    </figure>
    <div class="spacer"></div>
    <p>Skuespilleren Kevin Spacey, der nok er bedst kendt for sin rolle som den magtgale præsident Frank Underwood i Netflix-serien 'House of Cards', skal betale 205 millioner kroner til produktionsselskabet MRC, der står bag serien.</p>

<p>Det skyldes, at Kevin Spacey har brudt kontrakten og de regler, selskabet har om sexchikane, skriver blandt andet mediet Variety.</p>

<p>MRC droppede Kevin Spacey som seriens hovedrolle, efter det kom frem, at flere på filmholdet havde følt sig seksuelt chikaneret af skuespilleren.</p>

<p>Spacey var blandt de første hollywoodskuespillere, der blev beskyldt for sexchikane, efter Harvey Weinstein-skandalen begyndte i oktober 2017.</p>
  </div>
</article>

SCSS

body {
  font-family: Publik;
  margin: 0;
}

article {
  margin: 1rem auto;
  background-color: #EEE;
  padding: 1rem;
  max-width: 1200px;
  max-height: 100vh;
  display: flex;
  flex-direction: column;

 @media (min-width: 36.5rem) {
  margin: 2.5rem auto;
  padding: 2.5rem;
  max-height: 100vh;
 }
}

article h2 {
  font-size: ;
  margin: 0 0 2.5rem 0;
}

article h2 span {
  font-weight: 100;
  background: linear-gradient(#FFF, #FFF);
  background-size: calc(var(--dre-line-height) * 100%);
}

.body {
  column-width: calc((100vw - (2 * 1rem)) / 1.2);
  column-gap: 1.5rem;
  overflow: auto;
  max-height: 50vh;
  @media (min-width: 36.5rem) {
    column-width: 15rem;
  }
}

.body > * {
  margin-top: 0;
}

.body > * + * {
  margin-top: 1.5rem;
}

.body figure {
  margin: 0;
}
figure {
  width: 100%;
  page-break-inside: avoid;
  break-inside: avoid;
}
figure img {
  display: block;
  width: 100%;
  @media (min-width: 36.5rem) {
    width: calc(200% + 1.5rem);
  }
}

figcaption {
  margin-top: 0.5rem;
  font-size: smaller;
}

.spacer {
  page-break-inside: avoid;
  break-inside: avoid;
  padding-bottom: calc(((9 / (16 / 2)) * 100%) + 0.75rem);
  display: none;
  
  @media (min-width: 36.5rem) {
    display: block;
  }
}