.content {
  .heading {
    align-items: center;
    gap: 0.25em;
    display: flex;
  }

  .heading__anchor {
    /* font-family: var(--font-family-monospace); */
    font-size: 60%;
    text-decoration: none;
  }

  .codeblock {
    font-family: var(--font-family-monospace);
    overflow: auto;
  }
}

.content-title {
  margin-block: var(--space-xl) var(--space-l);

  /* margin-block-start is handled by the grid */
  &:first-child, &:first-child .title {
    margin-block-start: 0;
  }

  .title:has(+ .subtitle) {
    margin-block-end: var(--space-xs);
  }

  .title:not(:has(+ .subtitle)), .subtitle {
    margin-block-end: var(--space-m);
  }

  .subtitle {
    color: var(--gray3);
  }

  .content-date {
    margin-block-end: var(--space-paragraph);
  }

  .heading {
    display: block flex;
    gap: var(--space-s);
    grid-column: main-start / main-end;
  }

  .heading__anchor {
    align-self: center;
    color: var(--gray5);
    font-size: var(--text-m);
    justify-content: center;
    letter-spacing: -0.2em;

    a {
      transition: 0.3s color;
    }

    a:hover {
      color: var(--text-color);
      text-decoration: none;
      transition: 0.3s color;
    }
  }
}