/*---------------------------------------------------------------*/
/*------------- Put CSS to overwrite Blog CSS here  -------------*/
/*---------------------------------------------------------------*/
.blog-widget .blog-widget-article .blog-widget-article-preview .blog-widget-article-preview-title {
  line-height: 1em;
  padding: .5em 0;
  color: var(--cardHeadingColor);
  font-family: var(--boldFont);
  font-weight: var(--cardHeadingWeight);
  font-size:1.2em;
}


.blog-widget .blog-widget-article .blog-widget-article-preview {
  width: 100%;
  padding: 1em .5em 3em; }


.blog-widget .blog-widget-article .blog-widget-article-preview .blog-widget-article-content-button {
  display: block;
  width: 100%;
  max-width: 50%;
  position:absolute;
  bottom: 1em;
  left: 0.5em;
  right: 0;
  margin: 0;
}

.articleStub {
  display:flex;
  flex-wrap:wrap;
  
}

.blogPost {
  width:25%;
}



@media all and (max-width: 1000px) {
  .blogPost {
    width:50%;
  }
}

@media all and (max-width: 700px) {
  .blogPost {
    width:100%;
  }
}



.blogPost:not(:last-of-type) {
  padding-right:2%;
}

.blogPost .blogPostHero, .blogPost .blogPostDetails {
  width:100%;

}

.blogPost .blogPostHero {
   width:100%;
  height:200px;
}/*---------------------------------------------------------------*/
/*------------- Put CSS to overwrite Blog CSS here  -------------*/
/*---------------------------------------------------------------*/
.blog-widget .blog-widget-article .blog-widget-article-preview .blog-widget-article-preview-title {
  line-height: 1em;
  padding: .5em 0;
  color: var(--cardHeadingColor);
  font-family: var(--boldFont);
  font-weight: var(--cardHeadingWeight);
  font-size:1.2em;
}


.blog-widget .blog-widget-article .blog-widget-article-preview {
  width: 100%;
  padding: 1em .5em 3em; }


.blog-widget .blog-widget-article .blog-widget-article-preview .blog-widget-article-content-button {
  display: block;
  width: 100%;
  max-width: 50%;
  position:absolute;
  bottom: 1em;
  left: 0.5em;
  right: 0;
  margin: 0;
}

.articleStub {
  display:flex;
  flex-wrap:wrap;
  
}

.blogPost {
  width:33%;
}



@media all and (max-width: 1000px) {
  .blogPost {
    width:50%;
  }
}

@media all and (max-width: 700px) {
  .blogPost {
    width:100%;
  }
}



.blogPost:not(:last-of-type) {
  padding-right:2%;
}

.blogPost .blogPostHero, .blogPost .blogPostDetails {
  width:100%;

}

.blogPost .blogPostHero {
   width:100%;
  height:200px;
}