/* How a session goes: numbered steps on a line, in a row on the home page
   and wrapping below each other on a narrow screen. A dot marks each step on
   the line; the last one, the result, is lime. */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding-top: 1.75rem;
  border-top: 4px solid var(--text);
}

.steps li::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 24px;
  height: 24px;
  border: 4px solid var(--text);
  border-radius: 50%;
  background: var(--background);
}

.steps li:last-child::before {
  background: var(--lime);
}

.step-number {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
}

.steps p {
  margin: 0;
}