.c-benefit-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 40rem) {
  .c-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .c-benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.c-benefit-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

.c-benefit-card__media {
  position: relative;
  aspect-ratio: 1 / .86;
  background: radial-gradient(circle at 50% 42%, var(--color-surface-soft), var(--color-tan-300));
}

/* !important: core/image ships an unlayered .wp-block-image img
   { height: auto } rule that otherwise beats this layered height/
   object-fit, so the badge art overflows its box instead of cropping
   to fill it (same class of bug as the header/footer logo). */
.c-benefit-card__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.c-benefit-card__body {
  padding: var(--space-6);
}

.c-benefit-card__title {
  margin-bottom: var(--space-2);
  font-size: 1.3125rem;
  font-weight: 700;
}

.c-benefit-card__text {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  line-height: 1.55;
}