/* ==========================================================================
   process — the four-step "How It Works" grid
   ========================================================================== */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.process-step {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.process-num {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.process-step h3 {
  font-size: 19px;
  margin-bottom: 10px;
}
.process-step p {
  font-size: 14px;
  color: var(--stone);
  line-height: 1.6;
}

/* The grid steps down twice. Both breakpoints are specific to this component. */
@media (max-width: 900px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
}