/* Feature: one photo beside a heading, text and buttons. */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--flip .feature__media { order: 2; }
.feature__media img { width: 100%; border-radius: var(--radius); }
.feature__media figcaption {
  font-size: 14px;
  color: var(--c-muted);
  margin-top: 8px;
}
.feature__body h2 { font-size: clamp(26px, 3.4vw, 34px); }
.feature__quote {
  font-family: var(--f-heading);
  font-size: 22px;
  color: var(--c-primary-dark);
  border-left: 5px solid var(--c-give);
  padding-left: 16px;
  margin: 0 0 1.2em;
}
@media (max-width: 760px) {
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
}