/*---------------------------------------------------------------*/
/*------------- Put CSS to overwrite Blog CSS here  -------------*/
/*---------------------------------------------------------------*/

.blogPost .blogPostHero .image {
  height: 0;
  padding-bottom: 100%;
    border-radius: var(--radIt);
}

.blogPost {
  box-shadow: none !important;
    margin: 3em 0;
    max-width: 880px;
}

.blogPost .blogPostDetails {
  width: 70%;
  width: calc(100% - 200px);
  padding: 0px 0px 0 30px;
}

.blogPost .blogPostDetails .blogPostText {
  padding: 0.2em 0 1em;
    font-size: .95em;
    line-height: 1.5em;
    color: var(--fontColor);
}

.blogPost:not(:last-child) {
    margin-bottom: 4em;
}

.blogPost .blogPostDetails .blogTitle {
  color: var(--headingColor);
  font-family: var(--headingFont);
  font-weight: 600;
    line-height: 1.4em;
}


@media all and (min-width:851px) {
    .blogPost .blogPostHero .image {
        margin-top: 5px;
    }
}


@media all and (max-width:850px) {
    .blogPost {
        display: flex;
        flex-direction: column;
    }

    .blogPost .blogPostDetails {
  width: 100%;
  padding: 7px 0 0;
}


  .blogPost .blogPostHero {
    width: 100%;
    max-width: 320px;
    max-height: none;
    min-height: 15em;
    margin: 0 0 1em;
  }
  .blogPost .blogPostDetails {
    width: 100%;
  }

}

@media all and (max-width:780px) {
  .blogPost .blogPostHero {
    max-width: none;
 }
}