/* Feature rail: category labels stay at the top, headlines align at the bottom. */
.feature-grid {
  container: feature-grid / inline-size;
}

.feature-card,
.feature-card--lead {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  min-inline-size: 0;
  min-block-size: 154px;
}

.feature-card > span {
  grid-row: 1;
  align-self: start;
  margin: 0;
  line-height: 1.4;
}

.feature-card > h3 {
  grid-row: 3;
  align-self: end;
  min-block-size: 3.2em;
  margin: 0;
  font-size: clamp(.78rem, 1.08vw, .94rem);
  line-height: 1.6;
  text-wrap: balance;
}

.feature-card > p {
  display: none !important;
}

@container feature-grid (max-width: 760px) {
  .feature-card > h3 {
    font-size: clamp(.76rem, 2.05cqi, .88rem);
  }
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .feature-card,
  .feature-card--lead {
    min-block-size: 142px;
    padding: 14px;
  }
}

@media (max-width: 700px) {
  .feature-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(170px, 68vw, 230px);
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    scroll-snap-type: inline mandatory;
  }

  .feature-card,
  .feature-card--lead {
    min-block-size: 150px;
    scroll-snap-align: start;
  }

  .feature-card > h3 {
    min-block-size: 0;
    font-size: .88rem;
  }
}