.op-section {
  padding: 88px 0;
  background: var(--op-surface);
  color: var(--op-ink);
}

.op-section--white { background: var(--op-surface); }
.op-section--soft { background: var(--op-surface-alt); }
.op-section--mint { background: var(--op-brand-light); }
.op-section--dark {
  background: var(--op-footer);
  color: #fff;
}
.op-section--dark .op-eyebrow { color: var(--op-brand-on-dark); }
.op-section--dark .op-section__intro { color: var(--op-footer-text); }
.op-section--dark .op-section__rule {
  background: linear-gradient(90deg, var(--op-brand), rgba(255,255,255,.24));
}

.op-section__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.op-section__title {
  font-size: 1.9rem;
  font-weight: 600;
  margin: .35em 0 .4em;
}
.op-section__intro {
  color: var(--op-ink-soft);
  margin: 0;
}
.op-section__rule {
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--op-brand), var(--op-brand-light));
  margin: 1.1em auto 0;
}

.op-section__grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
}
.op-section__grid > * { min-width: 0; }
.op-section__grid--one { grid-template-columns: 1fr; }
.op-section__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-section__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-section__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-section__grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.op-section__footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

@media (max-width: 960px) {
  .op-section__grid--three,
  .op-section__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .op-section { padding: 64px 0; }
  .op-section__grid--two,
  .op-section__grid--three,
  .op-section__grid--four { grid-template-columns: 1fr; }
}