.heading,
.heading__content
{
  grid-column: main-start / main-end;
}

.heading.with-anchor {
  display: block grid;
  grid-template-columns: subgrid;
  grid-column: gutter-left-start / main-end;

  a {
    transition: 0.3s color;
  }

  .heading__anchor a {
    color: transparent;
  }

  &:hover .heading__anchor a {
    color: var(--text-color-secondary);
  }

  .heading__anchor {
    align-self: center;
    font-size: max(var(--text-m), 80%);
    grid-column: gutter-left-start / gutter-left-end;
    justify-content: center;

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

@media screen and ((max-width: 480px) or (hover: none)) {
  .heading.with-anchor {
    display: flex;
    gap: 1ch;
    grid-column: main-start / main-end;

    .heading__anchor {
      grid-column: auto;
      font-weight: normal;
      order: 99;

      a {
        color: var(--text-color-light);
      }
    }
  }
}