.flex-image{
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap:20px;
     -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-image>*{
    display:block;
    width:calc(100% / 4 - 15px);
      -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.flex-image>* img{
    width:100%;
    height:280px;
    object-fit:cover;
    
}
    @media only screen and (max-width: 600px),
    only screen and (max-device-width: 600px) {
        .flex-image>*{

    width:calc(100% / 2 - 15px);
 
}
    }
     @media only screen and (max-width: 400px),
    only screen and (max-device-width: 400px) {
             .flex-image>*{

    width:100%;
 
}
    }