/*
  Features (.features; Figma Partnerships 172:463–503 "How it works"): a grid of 480×443 cells, three across, divided
  by white hairlines (the same thirds as the work cards). Each cell is a line icon, a Cal Sans title and a grey
  summary. Rows close with a rule; there is a rule above the first row too.

  Markup:
    <ul class="features rule-t">
      <li class="feature">
        <img class="feature__icon" src="images/icon-….svg" alt="">     (line art, 56px tall, white 0.5px strokes)
        <h3 class="feature__title t-teaser">White-labeled by default</h3>
        <p class="feature__text t-summary">We work behind your brand…</p>
      </li>
      …
    </ul>
  Fields: items[] of { icon, title, summary }. Any number of items: they fill rows of three.
  Type: .t-teaser / .t-summary (site.css), as in the post list, with Figma's tighter title tracking here.
*/
.features{display:grid;grid-template-columns:repeat(3,48rem);grid-auto-rows:minmax(44.35rem,auto);margin:0;padding:0;list-style:none}
.feature{padding:9.34rem 0 4rem 3.94rem;border-bottom:var(--rule) solid var(--fg)}
.feature:not(:nth-child(3n)){border-right:var(--rule) solid var(--fg)}
.feature__icon{width:auto;height:5.6rem}
html[data-mode="light"] .feature__icon{filter:invert(1)}   /* white line art: black on the light ground */
/* Title cap line 34px under the icon; summary cap line 94px under the title's (both trimmed, as in Figma) */
.feature__title{width:40.03rem;margin-top:3.4rem;letter-spacing:-.038rem;text-box:trim-both cap alphabetic}
.feature__text{width:34.6rem;margin-top:2.7rem;color:var(--grey);text-box:trim-both cap alphabetic}

@media (max-width:767px){
  .features{grid-template-columns:1fr;grid-auto-rows:auto}
  .feature{padding:4rem 2rem}
  .feature:not(:nth-child(3n)){border-right:0}
  .feature__icon{height:4.4rem}
  .feature__title{width:auto;margin-top:2.4rem}
  .feature__text{width:auto;margin-top:1.4rem}
}