[class*="hmBanner"] > div {display: grid; padding: 0 0 1em 0; grid-gap:1em;}
[class*="hmBanner"] > div > a {position: relative; width: 100%; height: 100%}
[class*="hmBanner"] > div > a:hover .bannerView {background: #2b3266;}
.modernizr-no-cssgrid [class*="hmBanner"] > div { display: block}
.hmBanner1 > div {grid-template-columns: repeat(1,1fr); -ms-grid-columns: 1fr }
.photo {background: #efefef;background-size: cover; background-position: center; height: 100%}
.photo div:after {padding-bottom: 75%;content: "";display: block;width: 100%;}
.hmBanner1 > div > a:nth-child(1) {grid-column: 1/3;grid-row: 1/3;}
.hmBanner1 > div > a:nth-child(4) {grid-column: 2/4;grid-row: 3/5;}

/* text overlay  --------------------------------------------------------------- */
.bannerTxtCtr{position:absolute;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: row;align-items: center;justify-content: center;flex-wrap: wrap;text-align: center;padding: 32px;z-index: 2;width: 100%;height: 100%;flex-direction: column;-ms-flex-direction: column; color: white}
.bannerDesc, .bannerTitle, .bannerView {background: #000000a6;text-transform: uppercase;}
.bannerDesc:empty, .bannerTitle:empty, .bannerView:empty{display:none;}
.bannerTxtCtr > span { padding: 8px 16px}
.bannerDesc {letter-spacing: 2px;font-size: smaller;}
.bannerTitle {font-size: x-large;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.bannerView {margin-top: 8px;font-size: small;border: 1px solid #ffffff4a;}
.hmBanner3 .bannerTitle {font-size:small;max-height: 53px;}



/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px)
{
	[class*="hmBanner"] > div { padding: 0 0 0.5em 0; grid-gap:0.5em;}
	.bannerTxtCtr { padding:8px}
	.hmBanner1 > div {grid-template-columns: 1fr; -ms-grid-columns: 1fr}
	.hmBanner1 > div > a:nth-child(1) {grid-column:auto;grid-row:auto;}
	.hmBanner1 > div > a:nth-child(4) {grid-column: auto;grid-row: auto;}
	.hmBanner2 > div {grid-template-columns: repeat(1,1FR);}
	.hmBanner3 > div {grid-template-columns: repeat(2,1FR);font-size: small;}
	.hmBanner3 > div > span {grid-template-columns: repeat(2,1FR);font-size: small;}
	.bannerTitle {font-size: large;text-transform: uppercase;}
	.bannerTxtCtr > span { padding: 4px 8px}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px)
{
	.bannerTitle {font-size: large;}
	.bannerTxtCtr { padding:16px;}
	.bannerTxtCtr > span {padding: 4px 8px;}
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.9px)
{
    /* --- CSS images hide*/
	.bannerTxtCtr { padding:16px}
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913.9px)
{
    /* --- Banner 1 override */
}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px)
{
	/* --- Banner 1 override */
}<strong></strong>