.mod-callout-container{display:flex; justify-content:center;}

.mod-callout-items{display:flex; flex-wrap:wrap;max-width:100%;width: 1040px;justify-content: space-between;}
.mod-callout-item-container{max-width:320px;width:33%;padding:0 1rem 2rem 1rem;

    }
.mod-callout-item{ background-size:cover; text-align:center;position:relative;border:1px solid #bbb;border-radius:3px;
    transition: all 0.4s 0.05s;  }
.mod-callout-item:hover{transform: scale(1.15) rotate(-4deg);}
.mod-callout-item-image{opacity:0;}
.mod-callout-item-hover-text {
    position: absolute; top: 40%; text-align: center;
    display:block;width:100%;margin:0 auto;padding:1px 1.5em;background:rgba(0,0,0,.5);
    font-size: 1.5em; color: #fff; font-weight: 600; text-shadow:1px 1px 9px rgba(0,0,0,.6);
    opacity:0;
}
.mod-callout-item:hover .mod-callout-item-hover-text{opacity:1;}
.mod-callout-item-title {position:relative;top:10%;}

.mod-callout-popout-area{display:none;}

/* =========== media - screen sizes ====== */

@media only screen and (min-width: 48rem) and (max-width: 59.99rem) {
    .mod-callout-item-hover-text{font-size:1.3em;}

}

@media only screen and (max-width: 47.99rem) {
    .mod-callout-items{width:auto;}
    .mod-callout-item-hover-text{font-size:1em;}
    .mod-callout-item-container{width: 50%;}

}

@media only screen and (max-width: 29.99rem) {
    .mod-callout-item-hover-text{font-size:1em;}
    .mod-callout-item-container{width: 100%;}

}