.hpSquareWrap {
    padding: 2em 25px;
}

.hpSquareInner {
    display: flex;
    grid-gap: 30px;
    flex-flow: row wrap;
}

.hpSquareItem {
    flex: 1;
    position: relative;
}

.hpSquareItem a img {
    width: 100%;
}

.hpSquareItem a:after {
    background-color: rgba(21,133,212,0.4);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .3s ease-in-out;
    opacity: 0;
}

.hpSquareItem a:hover:after {
    opacity: 1;
}

@media screen and (max-width: 990px) {
    .hpSquareItem {
        flex: 100%;
    }
}