@layer modules {
  .edge-case-grid {
    /* Breaks out of the body's reading measure, since a four-column grid needs
       more room than a paragraph does. */
    max-width: none;
    margin: 2.5rem 0 3rem;

    /* Same reason as the comparison table's heading: this is prose, so it
       aligns with the page's text column while the columns below bleed wider. */
    .edge-case-grid-title {
      max-width: 46rem;
      margin-block: 0 1.5rem;
      margin-inline: auto;
      font-weight: 600;
    }

    /* 12rem columns with a 1.5rem gap so four still fit inside --figure-width:
       4 x 192px + 3 x 24px = 840px. At the previous 13rem/2rem, four columns
       needed 928px and auto-fit silently dropped to three, wrapping the last
       group onto its own row. */
    .edge-case-grid-columns {
      max-width: var(--figure-width, 900px);
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
      gap: 1.5rem;
    }

    .edge-case-group-header {
      margin: 0 0 .8rem;
      padding-bottom: .5rem;
      color: #555;
      font-size: 1rem;
      font-weight: 500;
      border-bottom: 1px solid #e5e7f5;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      display: grid;
      grid-template-columns: 1.2rem 1fr;
      gap: .5rem;
      margin: 0 0 .5rem;
      font-size: .95rem;
      line-height: 1.45;
    }

    svg {
      width: 1rem;
      height: 1rem;
      margin-top: .18rem;
      color: #16a34a;
    }
  }
}