body{background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);} 

 .flex{width:98%; display: block; margin: auto; }
.flex li:nth-child(even) .img { order: 2;}
.flex li:nth-child(even) .text { order: 1;}
.flex li .text p { font-size: 14px; line-height: 1.5em;}
.flex.link li { cursor: pointer; width: calc(100% / 4 - 19px); margin:20px 20px 20px auto; display: inline-block; vertical-align: top;}
.flex.link li:hover { opacity: 0.7;}
.flex.link li:nth-child(4n) { margin-right: 0;}
.flex.link li .img { width: 100%; }
.flex.link li > div { width: 100%;    margin: 10px auto; }
.flex.link li a { text-decoration: none; word-wrap: inherit; word-break: inherit;}
.flex.link li a .text { width: initial; color: #595757; letter-spacing: 0.3px; font-size: .9rem;}
  
@media print, screen and (max-width:999px) {
.flex li .img,  .flex li .text { width: 100%;}
.flex.link li { width: calc(100% / 3 - 19px);}
.flex.link li:nth-child(4n) { margin-right: 20px;}
.flex.link li:nth-child(3n) { margin-right: 0;}
 }
@media only screen and (max-width:640px) {
.flex li { display: inherit;}
.flex li > div:first-child { margin-bottom: 15px}
.flex.link li { width: calc(100% / 2 - 13px);}
.flex.link li .text .title { font-size: 15px; letter-spacing: 0;}
.flex.link li:nth-child(3n),  .flex.link li:nth-child(4n) { margin-right: 20px;}
.flex.link li:nth-child(2n) { margin-right: 0;}
}