.process-section { padding-block: 52px; }

.process-grid {
  column-gap: 32px;
  row-gap: 32px;
  margin-top: 32px;
}

.process-step {
  position: relative;
  min-width: 0;
  padding: 28px 16px 0 0;
  border-top: 1px solid var(--line);
}

.process-step::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-dark);
}

.process-step:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 100%;
  width: 32px;
  border-top: 1px solid var(--line);
}

.process-number {
  margin-bottom: 18px;
  color: var(--accent-dark);
  font-family: Manrope, sans-serif;
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.06em;
}

.process-step h3 { font-weight: 700; }
.process-step p { max-width: 34ch; margin-top: 10px; }

@media (min-width: 621px) and (max-width: 1000px) {
  .process-grid { row-gap: 32px; }
  .process-step::after { display: none; }
  .process-step:nth-child(odd)::after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 100%;
    width: 32px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .process-grid { gap: 0; margin-top: 30px; }
  .process-step {
    padding: 0 0 26px 26px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .process-step:last-child { padding-bottom: 0; border-left-color: transparent; }
  .process-step::before { top: 7px; left: -3px; }
  .process-step::after { display: none; }
  .process-number { margin-bottom: 12px; font-size: 39px; }
  .process-step p { max-width: none; }
}