div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}




		.flex-container {
			display: flex;
			flex-wrap: wrap;
			background-color: #ffffff;
		}

		.flex-container > div {
		  background-color: #ffffff;
		  width: 24.7%;
		  margin: 0px;
			border: 2px solid red;
			text-align: center;
		  line-height: 20px;
			font-size: 15px;
		}

		@media only screen and (max-width: 1000px) {
	  .flex-container > div {
	    width: 33.333%;
	    margin: 6px 0;
	  }

		@media only screen and (max-width: 700px) {
		  .flex-container > div {
		    width: 49.99999%;
		    margin: 6px 0;
		  }
		}

		@media only screen and (max-width: 500px) {
		  .flex-container > div {
		    width: 100%;
		  }
		}


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}