.page-index .container {
  width: var(--container-width);
  margin: var(--container-top-offset) auto 0;
  padding: var(--s-md) var(--s-md) var(--container-bottom-offset);
}

@media (max-width: 600px) {
  .page-index .container {
    margin: var(--container-top-offset) auto;
  }
}

.page-index .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-2xl);
}

.page-index .hero .subtitle {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin: 0;
  text-align: center;
}

.page-index .hero .description {
  font-size: var(--fs-lg);
  margin-top: var(--s-lg);
  max-width: 54ch;
  text-align: center;
  opacity: 0.7;
}

.page-index .hero .description .action {
  background-color: var(--c-primary);
  font-family: "Courier New", Courier, monospace;
  font-weight: 600;
  padding: calc(var(--s-2xs) / 2);
  border-radius: var(--radii-sm);
}