.breadcrumbs__wrapper{
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #7ea69d;
}
.breadcrumbs{
  margin: 0;
  display: inline-flex;
  flex-direction: row; 
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
.breadcrumbs li a{
  color: #666666
;
  text-decoration: none;
}
.breadcrumbs li a:hover{
  text-decoration: underline;
}
.breadcrumbs li:last-child span{
  color: #666666
;
}

.blog-post{
  margin-block: 40px;
}
.blog-post__grid{
  --gap: 60px;
  --sidebar: 500px;
  display: grid;
  margin-top: 150px;
  gap: 15px var(--gap);
  grid-template-columns: calc(100% - var(--sidebar) - var(--gap) ) var(--sidebar);
  grid-template-areas: 
"title sidebar"
"featured-image sidebar"
"author sidebar"
"main sidebar" 
}

.blog-post__title {
  grid-area: title; 
  font-size: 3rem;
  position: relative;
}

.blog-post__title:before {
    content: "";
  width: 100%;
  max-width: 150px;
  height: 3px;
  display: block;
  position: absolute;
  bottom: -20px;
  background-color: #d50032;
  border-radius: 50px;
}
  
}

.blog-post__featured-image-wrapper {
  margin-block: 0 20px;
  grid-area: featured-image; 
}
.blog-post__featured-image{
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.blog-post__meta{
  font-size: 1.4rem;
  margin-block: 0 12px;
  display: flex;
  align-items: center;
  row-gap: 30px;
  column-gap: 30px;
  flex-wrap: wrap;
  padding: 15px 0px;
}

.blog-post__author-wrapper {display: flex; flex-direction: column;}

.blog-post__sharer{
  margin-top: 40px;
  display: flex;
  gap: 5px;
  row-rap: 5px;
  column-gap: 5px;
}

.blog-post__share{
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  transition: all .2s ease-in-out;
}

.blog-post__share--twitter:hover{
  background-color: #1d9bf0;
}

.blog-post__share--facebook:hover{
  background-color: #1877F2;
}

.blog-post__share--linkedin:hover{
  background-color: #0a66c2;
}
.blog-post__body {
  /*   padding-left: 95px; */
}

.blog-post__body blockquote {
  margin: clamp(20px, 4vw, 50px) 0;
  padding: clamp(20px, 4vw, 45px);
  border: none;
  font-weight: 300;
  /*   font-size: clamp(2.2rem, 4vw, 3rem); */
  line-height: 1.4;
  /*   font-style: italic; */
  background-color: #EFEFEF;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
} 

.blog-post__body blockquote p:last-child{
  margin-bottom:0;
}

@media(max-width: 992px){
  .blog-post__body blockquote p{
    font-size: clamp(30px, 4vw, 40px)!important;
  }
}

.blog-post__share svg{
  display: inline-block;
  vertical-align: top;
}

.blog-post__main {
  grid-area: main; 
}

.blog-post__meta {grid-area: author;}

.blog-post__tags {
  display: flex;
  margin: 40px 0 0 0;
  padding: 0;
  list-style: none;
  column-gap: 10px;
  row-gap: 10px;
  gap: 10px;
}

.blog-post__tag-link {
  padding: 8px 18px;
  display: inline-block;
  text-decoration: none;
  background-color: rgba(0,0,0,0.1);
  border-radius: 100vh;
  font-size: 1.4rem;
  line-height: 1.2;
  transition: all .2s ease-in-out;
}

.blog-post__tag-link:hover {
  background-color: rgba(0,0,0,.2);
}

.blog-post__comments{
  background-color:#fff;
  border: 1px solid rgba(0,0,0,0.1);
  margin-top: 40px;
  padding: clamp(20px, 4vw, 30px);
  border-radius: 4px;
}

.blog-post__sidebar {
  grid-area: sidebar; 
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  gap: 20px;
}

.sidebar__items{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.sidebar__author {
  display: block;
  padding: clamp(20px, 4vw, 30px);
  text-decoration: none;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  transition: all .2s ease-in-out;
}

.sidebar__author-main {
  --gap: 20px;
  --image: 100px;
  display: grid;
  gap: var(--gap);
  grid-template-columns: var(--image) calc(100% - var(--image) - var(--gap));
  align-items: center;
}

.sidebar__author-main h3 {
  margin: 0;
}

.sidebar__author-main + * {
  margin-top: 20px;
}

.sidebar__author-bio {
  font-size: 1.4rem;
}

.sidebar__author:hover {
  box-shadow: 0 0 4px rgb(0 0 0 / 40%);
}

.related-blogs__header {text-align: center;}
.related-blogs__header h2:before {    bottom: -75px; position: relative; margin: 0 auto;}



@media (max-width: 992px){
  .blog-post__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "author"
      "main"
      "sidebar";
  }
  
  .blog-post__sidebar{
    margin-top: 20px;
  }
  .blog-post__body {padding: 0 100px;}
  .blog-post__body blockquote {left: 0;}
}

@media(max-width: 1200px){
  .blog-post__grid{
    --sidebar: 450px;
  }
}

@media (max-width: 992px){
    .blog-post__body {padding: 0;}
}
@media (max-width: 500px) {
  .blog-post__grid {margin-top: 50px;}
  .related-blogs__header h2:before {bottom: -100px;}
}