/* Article wrapper - START */
.article-wrapper .article-navigation{
  margin-bottom: calc(1rem * var(--body-scale));
}
.article-wrapper .btn-back{
  display: inline-flex;
  align-items: center;
  gap: calc(.25rem * var(--body-scale));
}
.article-wrapper .article-header{
  margin-bottom: calc(2rem * var(--body-scale));
}
.article-wrapper .article-meta{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1rem * var(--body-scale));
  margin-bottom: calc(0.5rem * var(--body-scale));
}
.article-wrapper .article-meta time:not(:only-child){
  display: flex;
  gap: calc(1rem * var(--body-scale));
}
.article-wrapper .article-meta time:not(:only-child)::after{
  content: "";
  display: block;
  width: 1px;
  background-color: rgb(var(--line-color));
}
.article-wrapper .article-title:not(:last-child){
  margin-bottom: calc(1rem * var(--body-scale));
}
.article-wrapper .article-tags ul{
  display: inline-flex;
  flex-wrap: wrap;
  gap: calc(0.5rem * var(--body-scale));
  list-style: none;
}
.article-wrapper .article-header.text-left .article-tags ul{
  justify-content: flex-start;
}
.article-wrapper .article-header.text-center .article-tags ul{
  justify-content: center;
}
.article-wrapper .article-header.text-right .article-tags ul{
  justify-content: flex-end;
}
.article-wrapper .article-tags a{
  display: inline-block;
  padding: calc(0.25rem * var(--body-scale)) calc(0.625rem * var(--body-scale));
  background-color: rgb(var(--secondary-background) / 0.6);
  border-radius: calc(0.13px * var(--layout-radius));
  text-decoration: none;
  transition: background-color 200ms ease-in-out;
}
.article-wrapper .article-tags a:hover{
  background-color: rgb(var(--secondary-background) / 1);
}
.article-wrapper .article-featured-image{
  margin-bottom: calc(2rem * var(--body-scale));
}
.article-wrapper .article-featured-image .image-height-small{
  height: 40svh;
}
.article-wrapper .article-featured-image .image-height-medium{
  height: 60svh;
}
.article-wrapper .article-featured-image .image-height-large{
  height: 80svh;
}
.article-wrapper .article-content-wrapper,
.article-wrapper .article-comments-wrapper{
  justify-content: center;
}
.article-wrapper .article-content-wrapper:not(:last-child){
  margin-bottom: calc(2rem * var(--body-scale));
}
.article-wrapper .article-content:not(:last-child){
  margin-bottom: calc(2rem * var(--body-scale));
}
.article-wrapper .article-pagination{
  margin-top: calc(2rem * var(--body-scale));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(1rem * var(--body-scale));
}
.article-wrapper .article-pagination .disabled{
  pointer-events: none;
}
@media(max-width: 566px){
  .article-wrapper .article-pagination .btn{
    width: 100%;
    justify-content: center;
  }
}
.article-wrapper .article-comments{
  text-align: center;
}
.article-wrapper .article-comments h2,
.article-wrapper .article-comments h3{
  margin-bottom: 0.5em;
}
.article-wrapper .comment-form-container{
  margin-top: calc(2rem * var(--body-scale));
  width: min(500px, 100%);
  margin-inline: auto;
}
.article-wrapper .comment-form-container:not(:last-child){
  margin-bottom: calc(2rem * var(--body-scale));
}
.article-wrapper .comment-form-container .form-message{
  margin-bottom: calc(1rem * var(--body-scale));
}
.article-wrapper .comment-form-container input,
.article-wrapper .comment-form-container textarea{
  width: 100%;
}
.article-wrapper .comment-form-container .form-field:not(:last-child){
  margin-bottom: calc(1rem * var(--body-scale));
}
.article-wrapper .comment-container .comments-title{
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}
.article-wrapper .comment-container .comments-list{
  list-style: none;
}
.article-wrapper .comment-container .comments-list:not(:last-child){
  margin-bottom: calc(1.5rem * var(--body-scale));
}
.article-wrapper .comment-container .comments-list li:not(:last-child){
  margin-bottom: calc(1rem * var(--body-scale));
  padding-bottom: calc(1rem * var(--body-scale));
  border-bottom: 1px solid rgb(var(--line-color));
}
.article-wrapper .comment-content{
  margin-bottom: calc(1rem * var(--body-scale));
}
.article-wrapper .comment-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1rem * var(--body-scale));
}
.article-wrapper .comment-container .author-name:not(:last-child){
  padding-right: calc(1rem * var(--body-scale));
  border-inline-end: 1px solid rgb(var(--line-color));
} 
/* Article wrapper - END */