.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;

  & li {
    text-decoration: underline;
    font-weight: semibold;
  }
}

code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
}

pre:has(code) {
  padding: 1.5rem;
  grid-column: wide;

  /* 53rem = --content-max-width + 2 * --margin-default */
  @container (min-width: 53rem) {
    border-radius: 0.5rem;
  }
}

pre > code {
  overflow: auto;
  display: block;
  max-width: 100%;
}

.content-grid > :has(+ pre) {
  margin-bottom: var(--margin-default);
}

:not(pre) > code {
  background: #f4f4f4;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}