:root {
  --size-1: 8px;
  --size-2: 16px;
  --size-3: 24px;
  --size-4: 32px;
  --size-5: 40px;
  --size-6: 48px;
  --space-1: var(--size-1);
  --space-2: var(--size-2);
  --space-3: var(--size-3);
  --space-4: var(--size-4);
  --space-5: var(--size-5);
  --space-6: var(--size-6);
  --font-0: 0.8rem;
  --font-1: 1rem;
  --font-2: 1.25rem;
  --font-3: 1.56rem;
  --font-4: 1.95rem;
  --font-5: 2.44rem;
  --font-6: 3.05rem;
  --font-7: 3.8rem;
}
content {
  max-width: 1200px;
  margin: 0 auto;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.text-center {
  text-align: center;
}
.hidden {
  display: none;
}
.grid {
  display: grid;
  grid-template-columns: minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1fr);
}
.gap1 {
  gap: var(--space-1);
}
.gap2, .gap {
  gap: var(--space-2);
}
.gap3 {
  gap: var(--space-3);
}
.span2 {
  grid-column: span 2;
}
.span3 {
  grid-column: span 3;
}
.span4 {
  grid-column: span 4;
}
.mw {
  max-width: 600px;
}
@media (max-width: 600px) {
  .grid:not(.ignore-collapse) {
    grid-template-columns: 1fr;
  }
}
.f0 {
  font-size: var(--font-0);
}
.f1 {
  font-size: var(--font-1);
}
.f2 {
  font-size: var(--font-2);
}
.f3 {
  font-size: var(--font-3);
}
.f4 {
  font-size: var(--font-4);
}
.f5 {
  font-size: var(--font-5);
}
.f6 {
  font-size: var(--font-6);
}
.f7 {
  font-size: var(--font-7);
}
.bold {
  font-weight: bold;
}