.article {
  display: flex;
  flex-direction: column;
  background-color: rgb(var(--color-background));
  margin-block-end: 3.6rem;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2rem;
  column-gap: 0.8rem;
}

.article__tags-item {
  font-size: var(--font-size-static-xs);
  letter-spacing: 0.1rem;
  line-height: var(--line-height-static-sm);
  border-radius: 0.4rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.5);
  padding: 0.6rem 0.8rem;
}

.article__hero .media {
  border-radius: 0;
}

.article__hero + .article__tags,
.article__hero + .article__head {
  padding-block-start: 2rem;
}

.article__head {
  padding-block-end: 3.2rem;
  text-align: center;
}

.article__meta {
  margin-block-start: 2.4rem;
  font-size: var(--font-size-static-md);
  color: rgba(var(--color-heading-text), 0.75);
  line-height: var(--line-height-static-sm);
}

.article__hero {
  margin-block-end: 2rem;
  max-width: calc(var(--page-width) * 0.6666);
  padding: 0;
}

.article__media {
  aspect-ratio: 16 / 9;
}

.article__media > img {
  object-position: top center;
}

.article__content-inner {
  padding-block-start: 1.2rem;
  padding-block-end: 3.6rem;
  margin-block-end: 3.6rem;
  border-block-end: .1rem solid rgba(var(--color-border), var(--alpha-border));
}

.article__content h1,
.article__content h2,
.article__content h3,
.article__content h4,
.article__content h5,
.article__content h6 {
  margin-block-start: 0;
  margin-block-end: 1.2rem;
}

.article__content h1 {
  font-size: calc(var(--font-body-scale) * 1.4rem * 2.50);
}
.article__content h2 {
  font-size: calc(var(--font-body-scale) * 1.4rem * 2.25);
}
.article__content h3 {
  font-size: calc(var(--font-body-scale) * 1.4rem * 2.00);
}
.article__content h4 {
  font-size: calc(var(--font-body-scale) * 1.4rem * 1.75);
}
.article__content h5 {
  font-size: calc(var(--font-body-scale) * 1.4rem * 1.50);
}
.article__content h6 {
  font-size: calc(var(--font-body-scale) * 1.4rem * 1.25);
}

.article__content p,
.article__content ul,
.article__content ol {
  margin: 0 0 3.2rem;
}

.article__content p:last-child {
  margin-block-end: 0;
}

.article__content table + * {
  margin-block-start: 2rem;
}

.article__content table tr:first-child td {
  font-weight: var(--font-weight-bold);
}

.article__content blockquote {
  margin: 0 2.4rem 2rem;
  font-style: italic;
}

.article__content img {
  margin: 0;
  max-width: 100%;
  display: block;
}

.article .social-sharing {
  justify-content: center;
  padding-block-start: 2.4rem;
  margin-block-start: -1.2rem;
  color: rgb(var(--color-secondary-text));
}

.article__back {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.social-sharing + .article__back {
  margin-block-start: 2.4rem;
}

.article__back-link {
  display: flex;
  align-items: center;
}

.article__back-link svg {
  margin-inline-start: -0.2rem;
  margin-inline-end: 0.4rem;
  flex-shrink: 0;
  transition: transform var(--duration-default);
}

@media (hover: hover) {
  .article__tags a:hover {
    text-decoration-color: currentColor;
  }

  .article__back-link:hover svg {
    transform: translateX(.2rem);
  }
  [dir='rtl'] .article__back-link:hover svg {
    transform: translateX(-.2rem);
  }
}

@media screen and (max-width: 749px) {
  .article__hero {
    order: -1;
    margin-block-end: 2.8rem;
  }

  .article__breadcrumbs {
    margin-block-end: 4.8rem;
    padding: 0 calc(var(--page-gutter) * 1.5);
  }
}

@media screen and (min-width: 750px) {
  .article__breadcrumbs {
    padding: 3.6rem var(--page-gutter) 6.4rem;
  }

  .article__breadcrumbs ul {
    justify-content: center;
  }

  .article__title {
    margin-block-end: 2.4rem;
  }

  .article__head {
    padding-block-end: 6.4rem;
  }

  .article__hero + .article__tags,
  .article__hero + .article__head {
    padding-block-start: 3.4rem;
  }

  .article__content-inner {
    padding-block-end: 4.8rem;
    margin-block-end: 4.8rem;
  }

  /* .article__content h1,
  .article__content h4,
  .article__content h5 {
    margin-block-end: 4.4rem;
  }

  .article__content h6 {
    margin-block-end: 5rem;
  } */

  .article__content table + * {
    margin-block-start: 2.9rem;
  }

  .article__content p,
  .article__content ul,
  .article__content ol,
  .article__content blockquote {
    margin-block-end: 4.8rem;
  }

  .article__content-inner {
    padding-block-start: 2.8rem;
  }
}

@media screen and (min-width: 990px) {
  .article__share a > svg {
    width: 1.6rem;
    height: 1.6rem;
  }
  .article__share + .article__back {
    margin-block-start: 0;
  }
  .article .article__share--normal {
    position: relative;
    width: 100%;
    flex-direction: row;
    padding-block: var(--spacing-5);
  }
  .article .article__share--sticky {
    position: sticky;
    inset-block-start: calc(var(--social-share-sticky-top) + 2.4rem);
    inset-inline-start: calc(var(--social-share-sticky-start) + 3.6rem);
    z-index: 2;
    width: fit-content;
    flex-direction: column;
    width: 2rem;
    height: 0;
    order: -1;
    margin-block-start: 0;
    padding-block-start: unset;
    justify-content: flex-start;
  }
}

/*  Comments  */

.article__comments-wrapper {
  padding-block: 3.6rem;
  margin-block-start: 3.6rem;
  border-block-start: .1rem solid rgba(var(--color-border), var(--alpha-border));
}

.article__comments {
  padding-block-end: 4.8rem;
  border-block-end: .1rem solid rgba(var(--color-border), var(--alpha-border));
}

.article__comments-title {
  margin: 0 0 2.4rem;
}

.article__comments-title:last-child {
  margin-block-end: 0;
}

.comment-form > h2 {
  margin: 0 0 1.6rem;
  font-size: var(--font-size-static-xl);
  line-height: var(--line-height-static-md);
  text-transform: none;
}

.article__comments-wrapper h2:focus-visible,
.article__comments-wrapper p:focus-visible {
  outline: none;
}

.article__comment {
  padding: 2.4rem;
  background-color: rgb(var(--color-background));
}

.article__comment + .article__comment {
  margin-block-start: 2.4rem;
}

.article__comment > p {
  color: rgb(var(--color-heading-text));
}

.article__comment-foot {
  font-size: var(--font-size-static-sm);
}

.article__comment p {
  margin: 0 0 1.2rem;
}

.article__comments-pagination-alt {
  margin-block-start: 3.2rem;
}

.article__comments-message {
  margin-block-start: 1.6rem;
}

.article__comments-message .form__message {
  display: flex;
  align-items: center;
  font-size: var(--font-size-static-sm);
  color: rgb(var(--color-heading-text));
  margin: 0;
}

.article__comments-message .form__message svg {
  margin-inline-end: 1.6rem;
  flex-shrink: 0;
}

.article__comments-wrapper .pagination-wrapper {
  margin: 2.3rem 0;
  padding: 0;
}

.article__comments-fields {
  margin: 3rem 0 1.6rem;
}

.comment-form {
  padding-block-start: 4.8rem;
  color: rgb(var(--color-heading-text));
}

.comment-form .field__input {
  display: block;
  color: inherit;
}

.comment-form .field__label {
  color: inherit;
  letter-spacing: var(--letter-spacing-small);
}

.comment-form textarea {
  padding-block: 1.45rem;
  height: 11.4rem;
  resize: vertical;
}

.comment-form .button {
  min-width: 19.2rem;
}

.article__comments-wrapper--no-comments .comment-form {
  padding-block-start: 0;
}

@media screen and (min-width: 575px) {
  .comment-form .form-row--double {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 750px) {
  .article__comments-wrapper {
    margin-block-start: 4.8rem;
  }
}