.render-flow > ol,
.install-options {
  display: grid;
  gap: 16px;
  margin: 24px 0;
  padding: 0;
}
.render-flow > ol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  counter-reset: render-step;
}
.render-flow > ol > li,
[role="main"] .install-option.container {
  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--color-background-border);
  border-radius: 10px;
  background: var(--home-card-transfer);
}
.render-flow > ol > li {
  counter-increment: render-step;
}
.render-flow > ol > li::before {
  content: counter(render-step);
  display: block;
  margin-bottom: 12px;
  color: var(--home-accent);
  font-size: 1.6rem;
  font-weight: 750;
}
.render-flow > ol > li:nth-child(2),
[role="main"] .install-option.container:nth-child(2) {
  background: var(--home-card-jobs);
}
.render-flow > ol > li:nth-child(3) {
  background: var(--home-card-logs);
}
.render-flow p,
.install-option p {
  margin: 0 0 12px;
}
.render-flow p:last-child,
.install-option > :last-child {
  margin-bottom: 0;
}
.install-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.install-option .rubric {
  margin-top: 0;
  font-size: 1.1rem;
}
.install-option div[class*="highlight"] {
  margin: 16px 0 0;
}
.install-option pre {
  padding: 12px;
  font-size: 0.8rem;
}
@media (max-width: 640px) {
  .render-flow > ol,
  .install-options {
    grid-template-columns: 1fr;
  }
}