.article-heading {
  scroll-margin-block: calc(var(--header-height) * 1px + 1rem);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

@media (width >= 1024px) {
  .article-heading {
    scroll-margin-block: calc(var(--header-height) * 1px + 2rem);
  }
}

.article-heading__title {
  margin-top: 0;
  margin-bottom: 0;
  display: inline;
  font: inherit;
}

.article-heading__code {
  font-size: 1.2em;
  font-family: var(--font-family);
  letter-spacing: var(--letter-spacing);
}

.article-heading__copier {
  display: inline-block;
  white-space: nowrap;
  color: hsl(var(--color-blue));
}

.article-heading__copy-button {
  color: currentColor;
  background: none;
  border: 0;
  padding: 0;
  vertical-align: middle;
  transition: opacity 0.2s ease-in;
  appearance: none;
  cursor: pointer;
}

.article-heading__copy-button:disabled {
  cursor: default;
}

@media (hover: hover) {
  .article-heading:not(:hover) .article-heading__copy-button {
    opacity: 0;
  }

  .article-heading:not(:hover) .article-heading__copy-button:focus,
  .article-heading:not(:hover) .article-heading__copy-button:disabled {
    opacity: 1;
  }
}

.article-heading__icon {
  display: inline-block;
  width: calc(var(--font-size-m) * 1.3);
  height: auto;
  vertical-align: middle;
}

.article-heading__status {
  visibility: hidden;
  color: currentColor;
  font-size: calc(var(--font-size-m) * 1.07);
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

.article-heading--level-1,
.article-heading--level-1 > * {
  --font-size: var(--font-size-headline-1);
  --line-height: var(--font-line-height-headline-1);
}

.article-heading--level-2,
.article-heading--level-2 > * {
  --font-size: var(--font-size-headline-2);
  --line-height: var(--font-line-height-headline-2);
}

.article-heading--level-3,
.article-heading--level-3 > * {
  --font-size: var(--font-size-headline-3);
  --line-height: var(--font-line-height-headline-3);
}

.article-heading--level-3 .article-heading__icon {
  width: calc(var(--font-size-m) * 1.23);
}

.article-heading--level-3 .article-heading__status {
  font-size: var(--font-size-m);
}

.article-heading--level-4,
.article-heading--level-4 > * {
  --font-size: var(--font-size-headline-4);
  --line-height: var(--font-line-height-headline-4);
}

.article-heading--level-4 .article-heading__icon {
  width: calc(var(--font-size-m) * 1.16);
}

.article-heading--level-4 .article-heading__status {
  font-size: calc(var(--font-size-m) * 0.93);
}

.article-heading--level-5,
.article-heading--level-5 > * {
  --font-size: var(--font-size-headline-5);
  --line-height: var(--font-line-height-headline-5);
}

.article-heading--level-5 .article-heading__icon {
  width: calc(var(--font-size-m) * 1.09);
}

.article-heading--level-5 .article-heading__status {
  font-size: calc(var(--font-size-m) * 0.86);
}

.article-heading--level-2 {
  margin-top: 40px;
  margin-bottom: 8px;
}

.article-heading--level-3,
.article-heading--level-4,
.article-heading--level-5 {
  margin-top: 20px;
  margin-bottom: 8px;
}

.article-heading + .article-heading {
  margin-top: 0;
}

.article-heading__copy-button:disabled + .article-heading__status {
  visibility: visible;
}

@media (width <= 720px) {
  .article-heading__status {
    display: none;
  }
}

@media (width >= 768px) {
  .article-heading--level-2 {
    margin-top: 70px;
    margin-bottom: 8px;
  }

  .article-heading--level-3,
  .article-heading--level-4,
  .article-heading--level-5 {
    margin-top: 24px;
    margin-bottom: 8px;
  }
}

@media (width >= 1024px) {
  .article-heading--level-2 {
    margin-top: 60px;
    margin-bottom: 10px;
  }

  .article-heading--level-3,
  .article-heading--level-4,
  .article-heading--level-5 {
    margin-top: 40px;
    margin-bottom: 10px;
  }
}

@media (width >= 1680px) {
  .article-heading--level-2 {
    margin-top: 70px;
    margin-bottom: 10px;
  }

  .article-heading--level-3,
  .article-heading--level-4,
  .article-heading--level-5 {
    margin-top: 50px;
    margin-bottom: 10px;
  }
}
