/* Blog tags */

.blog-index__post-tags {
  font-size: var(--fontsmall);
  margin: 0 0 0.7rem;
  font-style: italic;
}

.blog-post__header {
  position:relative;
  margin-bottom: var(--spacer);
  width: auto;
  max-width: 1000%;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  }

.blog-post__header img{
  width: 100%;
  height: auto;
  max-width: 100%;  
  max-height: 400px;
  object-fit: cover;
}

.blog-post__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow:hidden;
  background: rgba(0, 0, 0, 0.3);
}

.blog-post__title {
  color: var(--white);
  width: 100%;
  max-width: var(--readable);
  margin-left: auto;
  margin-right: auto;
}
.blog-post__meta {
  color: var(--white);
  width: 100%;
  max-width: var(--readable);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacer);
  }
.blog-index-title {
font-size: var(--fontsize-h3);
text-align:center;

}

  @media screen and (max-width: 960px) {
  .blog-post__title,
  .blog-post__meta {
    max-width: 92%;
    margin-left: var(--spacer);
    margin-right: var(--spacer);
  }
}
.blog-post__body {
  width: 100%;
  max-width: var(--readable);
  padding-bottom: var(--spacer-xl);
  margin: 0 auto var(--spacer-xl);
}

.blog-post__tags {
  width: 100%;
  max-width: var(--readable);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fontsmall);
  display:flex;
  padding: var(--spacer) 0;
  color: var(--quaternary);
}
.hs_cos_wrapper_type_icon svg {
  height: 16px;
  fill: var(--quaternary);
  margin-right: .75rem;
}
.blog-post__tag-link,
a.blog-post__tag-link,
a.blog-post__tag-link:link,
a.blog-post__tag-link:visited {
  color: var(--quaternary);
  text-decoration:none;
} 
a.blog-post__tag-link:hover,
a.blog-post__tag-link:active,
a:blog-post__tag-link:focus {
  color: var(--primary);
  outline:none;
  text-decoration:underline;
}
.blog-post__pagination {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-top: var(--spacer-lg);
  margin-bottom: var(--spacer-lg);
} 
}

.pagination__link--prev {
  margin-right: 0.7rem;
}

/* Blog related posts */
.blog-related-posts {
}

.blog-related-posts h2 {
  padding: 0 1rem;
  margin-bottom: 0.5rem;
}

.blog-related-posts__list {
  display: flex;
  flex-wrap: wrap;
}

.blog-related-posts__post {
  flex: 0 0 100%;
  padding: 1rem;
}

@media screen and (min-width: 768px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 2);
  }
}

@media screen and (min-width: 1000px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 3);
  }
}

.blog-related-posts__image {
  width: 100%;
  max-width: 100%;  
  height: 160px;
  object-fit: cover;
}

.blog-related-posts__title {
  margin: 0.7rem 0;
}

/* Blog comments */

.blog-comments {
  margin: 0 auto;
  max-width: 680px;
}

.blog-comments .hs-submit {
  text-align: center;
}

.blog-comments .comment-reply-to {
  border: 0 none;
}

.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
  background-color: transparent;
  text-decoration: underline;
}