.article-template {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.article-template > * {
  margin-top: 0;
  margin-bottom: 0;
}

.article-template > *:first-child:not(.article-template__hero-container) {
  margin-top: var(--space-12);
}

@media screen and (min-width: 750px) {
  .article-template {
    gap: var(--space-8);
  }

  .article-template > *:first-child:not(.article-template__hero-container) {
    margin-top: calc(var(--space-12) + var(--page-width-margin));
  }
}

.article-template__hero-container {
  max-width: 81.25rem;
  margin: 0 auto;
}

.article-template__hero-small {
  height: 6.875rem;
}

.article-template__hero-medium {
  height: 13.75rem;
}

.article-template__hero-large {
  height: 20.625rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .article-template__hero-small {
    height: 13.75rem;
  }

  .article-template__hero-medium {
    height: 27.5rem;
  }

  .article-template__hero-large {
    height: 41.25rem;
  }
}

@media screen and (min-width: 990px) {
  .article-template__hero-small {
    height: 17.1875rem;
  }

  .article-template__hero-medium {
    height: 34.375rem;
  }

  .article-template__hero-large {
    height: 51.5625rem;
  }
}

.article-template header {
  line-height: calc(0.8 / var(--font-body-scale));
}

.article-template__title {
  margin: 0;
}

.article-template__title:not(:only-child) {
  margin-bottom: var(--space-2-5);
}

.article-template__link {
  font-size: var(--font-size-md);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.article-template__link .icon-wrap {
  display: flex;
  margin-right: var(--space-2-5);
  transform: rotate(180deg);
}



.article-template__comment-wrapper {
  margin-top: var(--space-12);
  padding: var(--space-7) 0;
}

@media screen and (min-width: 750px) {
  .article-template__comment-wrapper {
    margin-top: calc(var(--space-14) + var(--space-1));
    padding: var(--space-9) 0;
  }
}

.article-template__comment-wrapper h2 {
  margin-top: 0;
}

.article-template__comments {
  margin-bottom: var(--space-12);
}

@media screen and (min-width: 750px) {
  .article-template__comments {
    margin-bottom: calc(var(--space-16) + var(--space-1-5));
  }
}

.article-template__comments-fields {
  margin-bottom: var(--space-10);
}

.article-template__comments-comment {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
  margin-bottom: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

@media screen and (min-width: 750px) {
  .article-template__comments-comment {
    padding: var(--space-5) var(--space-6);
  }
}

.article-template__comments-comment p {
  margin: 0 0 var(--space-2-5);
}

.article-template__comment-fields > * {
  margin-bottom: var(--space-7);
}

@media screen and (min-width: 750px) {
  .article-template__comment-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--space-10);
  }
}

.article-template__comment-warning {
  margin: var(--space-5) 0 var(--space-6);
}

@media screen and (min-width: 990px) {
  .article-template__comments .pagination-wrapper {
    margin: var(--space-12) 0 var(--space-20);
  }
}

.article-template__back:last-child {
  margin-bottom: var(--space-8);
}