.blogLandingPage {display: grid;grid-gap: 1em;}
.blogLandingPage {grid-template-columns: repeat(4, 1fr);}
.blogLandingPage img {width:100%;object-fit: cover;height: 20vh;}
.blogLandingPage > span:first-of-type {height: 100%;}
.blogLandingPage > span {grid-column: span 1;grid-row: span 1;height: 100%;display: inline-block;}
.blogLandingPage .hmBlog {position:relative;display: flex;flex-direction: column;}
.blogLandingPage .hmBlog:hover h2 {text-decoration: underline;}
.blogLandingPage .blogSnipImg {max-width: 100%;}
.blogLandingPage .blogSnipText {/* display:none; */order: 2;font-size: small;}

.blogSnipText a { color:#1b84cd}
.blogLandingPage .blogSnipImg {order:-1;z-index: 0;width: 100%;}
.blogLandingPage h2 {padding: 16px 0 8px 0;margin:0;font-family: inherit;font-size: 16px;line-height: 130%;font-weight: 700;}
.blogLandingPage p {padding: 0;margin: 0;font-size: 11px;color: #05548b;}
.blogLandingPage p strong {display:none}
.blogLandingPage .blogSnipImg :after {content: "";display: block;width: 100%;}
.blogLandingPageMore  { margin-bottom:56px}
.blogLandingPageMore p { color:#949494; font-size:14px}
.blogLandingPageMore a {border-radius: 4px;background: #606163;color: #ffffff;font-size: 14px;}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 0px) and (max-width : 1023.9px)
{
	.blogLandingPage {grid-template-columns: repeat(2, 1fr);padding-bottom: 56px;}  
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 0px) and (max-width : 768.9px)
{
	.blogLandingPage {grid-template-columns: repeat(1, 1fr);padding-bottom: 56px;}  
}