@media(min-width: 23rem) {
  :root {
    --base-unit: 1rem;
  }

  body {
    padding: var(--spacing-xxl) var(--spacing-lg);
  }
}

@media(min-width: 64rem) {
  :root {
    --base-unit: 1.125rem;
  }

  body {
    padding: var(--spacing-md) 0;
  }

  .page-wrapper {
    max-width: 68rem;
    padding: 0 var(--spacing-lg);
  }

  .page-header {
    max-width: calc(var(--base-unit) * 30);
    margin: 0 auto var(--spacing-xxl);
  }

  .header-title {
    font-size: calc(var(--base-unit) * 2);
    margin-block-end: var(--spacing-xs);
  }

  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--spacing-lg);
    align-items: center;
  }

  .feature-card {
    padding: var(--spacing-lg);
  }

  .card-supervisor {
    grid-column: 1;
    grid-row: 2 / span 2;
  }

  .card-team-builder {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .card-karma {
    grid-column: 2;
    grid-row: 3 / span 2;
  }

  .card-calculator {
    grid-column: 3;
    grid-row: 2 / span 2;
  }

  .feature-title {
    margin-block-end: 0;
  }

  .feature-description {
    font-size: calc(var(--base-unit) * 0.7);
  }
}