@layer components {
  .container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--block-space);
  }

  .site-content {
    min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--block-space-double));
  }

  /* ==========================================================================
     Homepage layout
     ========================================================================== */

  .home {
    padding: var(--block-space-double) 0;
  }

  .section-title {
    font-size: var(--text-title-2);
    margin-bottom: calc(var(--block-space) * 1.5);
    color: var(--color-ink);
  }

  .intro {
    max-width: var(--content-width);
    margin: var(--block-space-double) auto;
  }

  .intro-header {
    margin-bottom: var(--block-space-double);

    p {
      font-size: var(--text-title-3);
      line-height: var(--leading-snug);
      font-weight: 300;
      color: var(--color-ink);
    }
  }

  .intro-content p {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-light);
    margin-bottom: calc(var(--block-space) * 1.5);
  }

  .intro-content ul {
    margin-bottom: calc(var(--block-space) * 1.5);
  }

  .intro-content li {
    margin-bottom: var(--block-space-half);
  }
}