/* Blog post */
/* .hs-blog-post h1 {font-size: 3.5rem;}
.hs-blog-post h2 {font-size: 3rem;} */

.hs-audio-player{
  margin-bottom: 40px;
}

.hs-audio-player div[class*="duration"] {
  white-space: nowrap;
}

.blog-post{
  padding:20px 0 40px 0;
  max-width: 1272px;
  margin: 0 auto;
}

.blog-post__title-wrapper{
  margin: 0 0 30px 0;
  padding: 12px 0;
  position: relative;
}
.blog-post__head {
  margin: 0 auto;
  max-width: 880px;
  text-align: center;
}
.blog-post__title{
  display: inline-block;
  position: relative;
  margin:0;
  font-size: 70px;
}

.blog-post__date {
  text-align: center;
}


.blog-post__wrapper{
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  margin-top: 50px;
    max-width: 1272px;
}

.blog-post__featured-image {
  
}

.blog-post__featured-image  img {
  border-radius: 60px;
  max-height: 515px;
}
.blog-post__featured-image picture{
  margin-bottom:20px;
  display: block;
}
.blog-post__featured-image picture img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
}

.blog-post__meta{
  font-size:1.2rem;
  line-height:1.4;
  color:#7ea69d;
  text-transform: uppercase;
}
.blog-post__meta a{
  color:currentColor;
  text-decoration: none;
}
.blog-post__meta a:hover{
  text-decoration: underline;
}

.blog-post__comments{
  margin:50px 0 0 0;
  padding:20px;
  background:#fff;
}


.blog-post__sidebar-sticky{
  position: sticky;
  top: 50px;
  left:0;
  display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}
.blog-post__sidebar-sticky h3.sidebar-whitepaper__title.h4,  .sidebar-whitepaper__link   
  text-align: center;
  margin-bottom: 10px;
}

.blog-post__author {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items:center;
}

.blog-post__author img.blog-post__author__avatar {
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: top;
  border-radius: 100%;
}

h3.sidebar-whitepaper__title {
  font-size: 2rem;
}
.blog-post__content {
  margin: 0 auto;
  max-width: 624px;
}

blockquote {
  padding: 50px 0 50px;
  color:#1C4F4A;
  font-size: 2.8rem;
  line-height: 36px;
  border: 0;
  width: calc(100% + 200px);
  transform: translateX(-100px);
  margin: 0;
}

blockquote::before {
  content:"";
  margin-left: -27px;
 display: block;
  width: 24px;
  height: 21px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMTAuNTg2YzAtMy4wOTguNDAyLTUuMzkzIDEuMjA1LTYuODg1QzIuMDA4IDIuMTUgMy4wNCAxLjE0OCA0LjMwMy42ODkgNS41NjYuMjI5IDcuMjAxIDAgOS4yMSAwaC45NDd2NS43NjZoLS45NDdjLTEuNjA3IDAtMi42MS4zNDUtMy4wMTIgMS4wMzMtLjM0NS42MzEtLjUxNyAxLjM3Ny0uNTE3IDIuMjM4LjA1OC44MDMuMDg2IDEuMzIuMDg2IDEuNTVoNC4zOVYyMUgwVjEwLjU4NlptMjIuNTUtNC44MmMtMS42MDcgMC0yLjYxMS4zNDUtMy4wMTMgMS4wMzMtLjM0NC42MzEtLjUxNyAxLjM3Ny0uNTE3IDIuMjM4LjA1OC44MDMuMDg3IDEuMzIuMDg3IDEuNTVoNC4zODlWMjFIMTMuMzRWMTAuNTg2YzAtMy4wOTguNDAyLTUuMzkzIDEuMjA1LTYuODg1LjgwMy0xLjU1IDEuODM2LTIuNTUzIDMuMDk4LTMuMDEyQzE4LjkwNi4yMjkgMjAuNTQxIDAgMjIuNTUgMGguOTQ3djUuNzY2aC0uOTQ3WiIgZmlsbD0iIzFDNEY0QSI+PC9wYXRoPjwvc3ZnPg==")
}


.blog-detail__socials {
  display: flex;
    flex-direction: column;
    position: absolute;
    margin-left: -100px;
}


/********** Related blogs **********/


.related-blogs__title{
  text-align: center;
  margin-bottom:40px;
}

.related-blogs__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(330px,100%),1fr));
  justify-items: center;
  justify-content: center;
  gap:30px;
  column-gap: 30px;
  row-gap: 30px;
}
@media (max-width: 1200px) {
  blockquote {
    width: 100%;
    transform: none;
  }

  .blog-detail__socials {
    margin-left: -80px; /* iets minder dan de -100px op desktop, maar nog buiten de tekst */
  }

  .blog-post__content > span > p:first-of-type {
    padding-left: 50px;
  }
}

@media (max-width: 992px){
  .blog-post {padding-left: 16px; padding-right: 16px;}
  
  .blog-custom-cta .container.cta__inner{
    flex-direction: column;
  }
  .cta__image svg{
    width:100%;
  }
  .blog-post__sidebar-sticky {
    display: none;
  }
  .blog-post__wrapper {
    display: block;
    width: 100%;
  }

  .blog-detail__socials {
    display: none;
  }
}
@media (max-width:768px){
  .blog-post__wrapper{
    grid-template-columns: 1fr;
  }

  .blog-post__title  { font-size: 40px; }
  
  .blog-post__featured-image img {
    border-radius: 30px;
  }
  blockquote {
    padding: 0;
  }

  .blog-detail__socials {
    display: none;
  }
}