/* Use the full image height for the three approach steps. */
@media (min-width: 951px) {
  .approach { padding: 54px 0 62px; }
  .approach-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); column-gap: 58px; row-gap: 32px; }
  .approach .method { align-self: stretch; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0; }
  .approach .method li { align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
  .approach .method li:last-child { border-bottom: 1px solid var(--line); }
}

/* Let every endpoint choice have equal weight and give the example room to breathe. */
.endpoint-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 18px; }
.endpoint-choice { min-height: 54px; text-align: center; }
.endpoint-panel { min-height: 0; }
.endpoint-photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.endpoint-photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.endpoint-story { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 34px 44px; }
.endpoint-story h3 { margin: 12px 0 13px; }
.endpoint-story dl { margin: 16px 0 0; }
.endpoint-story dt { margin: 13px 0 3px; }

@media (max-width: 950px) {
  .endpoint-photo { aspect-ratio: 16 / 9; }
  .endpoint-photo img { aspect-ratio: auto; }
  .endpoint-story { padding: 34px 35px; }
}
@media (max-width: 700px) {
  .endpoint-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 26px 0 19px; }
  .endpoint-photo { aspect-ratio: 3 / 2; }
  .endpoint-story { padding: 29px 24px 32px; }
}