@layer modules {
  .integration-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    /* Every card as tall as the tallest, like the /integrations/ grid. */
    grid-auto-rows: 1fr;
    gap: 1rem;
    padding: 0;
    margin: 2rem 0;
    list-style: none;
    li {
      display: grid;
      grid-template-columns: 3rem 1fr;
      gap: 1rem;
      align-items: start;
      padding: 1.2rem;
      margin: 0;
      border: 1px solid #DFE4EC;
      border-radius: .75rem;
      &:has(:target) {
        border-color: #245aff;
        box-shadow: 0 0 0 3px #dfe8ff;
      }
    }
    svg {
      width: 3rem;
      height: 3rem;
    }
    h3 {
      scroll-margin-top: calc(var(--nav-height) + 2rem);
      margin: 0 0 .3rem;
      font-size: 1.1rem;
    }
    p {
      margin: 0;
      font-size: .95rem;
      color: rgb(0 0 0 / 75%);
    }
    .links {
      margin-top: .5rem;
      a {
        color: #245aff;
        font-weight: 500;
        text-decoration: none;
        &:hover { text-decoration: underline; }
      }
    }
  }
}