/*
  Related (.related; Figma article 147:267–280 "Related insights"): a titled row of teasers on the story text column.
  A hairline runs down the column edge from the top rule to the footer; the title sits in a 111px head with a rule
  under it from the column to the right edge; teasers are 414px cells divided by vertical rules, each an image, a
  small uppercase byline and a Cal Sans title.

  Markup (place last in <main>, right before the footer):
    <section class="related" aria-labelledby="related-title">
      <h2 class="related__title" id="related-title">Related insights</h2>
      <ul class="related__list">
        <li class="related__item">
          <a href="…">                                          (omit the link while the piece has no page)
            <div class="related__media"><img src alt=""></div>
            <p class="related__by">By Brad Ruiter</p>
            <h3 class="related__name">Blue-Collar UX: What That Phrase Actually Means</h3>
          </a>
        </li>
      </ul>
    </section>
  Fields: title, items[] of { image, byline, title, link? }. Uses the story column (--col, default 258.6px).
*/
.related{position:relative;border-top:var(--rule) solid var(--fg)}
.related::before{content:"";position:absolute;left:var(--col,25.86rem);top:0;bottom:0;width:var(--rule);background:var(--fg);pointer-events:none}
/* Title: cap line 37px under the top rule, trimmed to cap height as in Figma */
.related__title{height:11.1rem;margin-left:var(--col,25.86rem);padding:3.73rem 0 0 2.24rem;border-bottom:var(--rule) solid var(--fg);font-family:"Cal Sans",Inter,sans-serif;font-size:4.4rem;line-height:5.4rem;letter-spacing:.088rem;text-box:trim-both cap alphabetic}
.related__list{display:grid;grid-template-columns:repeat(auto-fill,41.4rem);margin-left:calc(var(--col,25.86rem) + var(--rule))}
.related__item{min-height:36.9rem;border-right:var(--rule) solid var(--fg)}
.related__item > a,.related__item > div{display:block;height:100%}
.related__media{height:23.2rem;overflow:hidden}
.related__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.related__by{margin:2.2rem 0 0 2.24rem;font-size:.9rem;line-height:1.1rem;text-transform:uppercase;text-box:trim-both cap alphabetic}
.related__name{width:33.8rem;margin:1.2rem 0 4.8rem 2.24rem;font-family:"Cal Sans",Inter,sans-serif;font-size:2rem;line-height:2.2rem;text-box:trim-both cap alphabetic}
.related__item a:hover .related__media img{transform:scale(1.04)}
.related__item a:hover .related__name{text-decoration:underline;text-underline-offset:.3rem}

@media (max-width:767px){
  .related::before{display:none}
  .related__title{height:auto;margin:0;padding:4rem 2rem 2.4rem;font-size:3rem;line-height:3.4rem}
  .related__list{grid-template-columns:1fr;margin:0}
  .related__item{min-height:0;border-right:0;border-bottom:var(--rule) solid var(--fg)}
  .related__item:last-child{border-bottom:0}
  .related__media{height:auto;aspect-ratio:414 / 232}
  .related__by{margin:2rem 2rem 0}
  .related__name{width:auto;margin:1.2rem 2rem 3.2rem}
}