.page-font {
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    margin: 2em auto;
    max-width: 120ch;
  }

  .header {
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;

    align-content: space-between;

    justify-content: space-between;

    place-content: space-between;
  }

  .header .font-info {
      display: grid;
      grid-template-columns: 3fr 1fr;
      grid-gap: 1rem;
      gap: 1rem;
    }

  .header .links {
      display: flex;
      gap: 1rem;
      height: 2lh;
    }

  .header .font-name {
      font-size: 2em;
    }

  h2 {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 1rem;
  }

  .font-preview-cards {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1rem;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .preview-text {
    padding: 0;
    margin: 0;
    -webkit-hyphens: auto;
            hyphens: auto;
    hyphenate-character: '';
    hyphenate-limit-chars: 5 2 2;
    white-space: pre-wrap;
  }

  .font-details-nav {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 2rem;
    border-bottom: 1px solid var(--primary-color);
  }

  .font-details-nav  > a {
      font-size: 1.25em;
      width: 100%;
      padding: 0.5em 1em;
      transition: border-bottom 0.3s ease;
      border-bottom: 4px solid transparent;
    }

  .font-details-nav > a:hover {
        border-bottom: 4px solid var(--primary-color);
        background: var(--surface-2);
      }

  .font-preview {
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    grid-template-columns: 1fr 4fr;
  }

  .font-preview-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .font-preview-controls .field {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

  .font-preview-controls .field label {
        font-size: 1em;
      }

  .font-preview-controls .field label .range-value {
          float: right;
          font-family: monospace;
        }

  .font-preview-controls .field input[type="range"] {
        width: 100%;
        height: 4px;
      }

  .embed {
    overflow: auto;
  }

  .embed pre {
      white-space: pre-line;
    }

  section {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
    grid-template-columns: 28ch auto;
  }

  #font-about {
    grid-template-columns: auto;
  }

  .carousel {
    /* appearance */
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    /* snap */
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    /* Enable Safari touch scrolling physics */
    -webkit-overflow-scrolling: touch;
  }

  .carousel-item {
    /* appearance */
    flex: 1 0;

    /* snap */
    scroll-snap-align: start;
    scroll-margin: 5px;
  }

  .carousel-item svg {
      height: auto;
      width: 85vw;
      max-width: 800px;
      box-sizing: border-box;

    }

  @media (max-width: 1200px) {
    .page-font {
      padding: 0 1rem;
    }

    .font-details-nav {
      display: none;
    }

    .font-preview {
      grid-template-columns: 1fr;
    }

    .preview-text {
      padding: 0;
    }

    .carousel {
      gap: 0.5em;
    }

    section {
      display: grid;

      grid-template-columns: 1fr;
    }
  }