/* ==========================================================================
   Component · Steps — "Three steps to your library."
   ========================================================================== */

.steps {
  padding-block: calc(var(--section-pad) / 2);
}

.steps__grid {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6875rem;
  counter-reset: step;
}

.step-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 2.5rem 2.375rem 2.75rem;
  transition:
    background-color var(--duration-fast) var(--ease-gentle),
    transform var(--duration-fast) var(--ease-spring);
}

.step-card:hover {
  background: var(--color-surface-hover);
  transform: translateY(-4px);
}

.step-card .eyebrow {
  display: block;
}

.step-card__title {
  margin-top: 1rem;
  font-size: var(--text-card-title);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
}

.step-card__body {
  margin-top: 1rem;
}

@media (max-width: 66.75em) {
  .steps__grid {
    grid-template-columns: 1fr;
    max-width: 35rem;
    margin-inline: auto;
  }

  .step-card__title br {
    display: none;
  }
}