.rowsOfery .content{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 50px 36px;
}
.rowsOfery .content a{
display: block;
text-align: center;
}
.rowsOfery .content a img{
max-width: 100%;
height: auto;
transition: all 0.5s ease-out 0s;
position: relative;
z-index: 2;
}

.rowsOfery .content a .spImg{
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.rowsOfery .content a .spImg:before{
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 8px;
background-color: #E0FFEC;
z-index: 1;
transition: all 0.5s ease-out 0s;
}

.rowsOfery .content a:hover .spImg:before{
background-color: #000000;
}

.rowsOfery .content a:hover img{
filter: brightness(0) invert(100%);
}

.rowsOfery .content a .title{
color: #000000;
font-weight: 500;
font-size: 20px;
transition: all 0.5s ease-out 0s;
}



@media screen and (max-width:1200px){
.rowsOfery .content{padding: 30px 0}
.rowsOfery .content a .title{font-size: 17px}
}
@media screen and (max-width:1140px){
.rowsOfery .content {grid-template-columns: repeat(4,1fr);}
}

@media screen and (max-width:840px){
.rowsOfery .content {grid-template-columns: repeat(3,1fr);grid-gap: 20px 20px}
}

@media screen and (max-width:840px){
.rowsOfery .content {grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width:410px){
.rowsOfery .content {grid-template-columns: 1fr;}
}