.gallery { display: flex; flex-direction: column; align-items: center;}
.gallery .row { justify-content: center; margin-left: -5px;}
.gallery .row li { float: left; list-style: none; min-height: 160px; margin: 5px; cursor: pointer; transition: all ease-in-out 250ms; position: relative;}
.gallery .row li p { display: none;}
.gallery .row li img { width: 267px; height: 200px; cursor: pointer; transition: all ease-in-out 250ms;}
.gallery .row li img:hover { filter: brightness(100%); filter: brightness(40%); object-fit: cover;}
.gallery .row li:hover p { display: block; position: absolute; bottom: 0px; color:#fff; font-size: 16px; width: 100%; line-height: 35px; padding-left: 15px;}

.lightboxContainer {background-color:#00000099;position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:999;display:flex;display:none;}
.lightboxContainer .lightbox {display:flex;align-items:center;justify-content:space-between;width:100%;}
.lightboxContainer .lightbox img {width:100%;max-width:1200px;}
.lightboxContainer .lightbox .close {position:absolute;top:20px;right:20px;cursor:pointer;font-size:40px;color:white;}
.lightboxContainer .lightbox .prev,.lightboxContainer .lightbox .next {user-select:none;cursor:pointer;font-size:50px;color:white;margin:40px;font-weight:800;}

@media only screen and (max-width: 600px) {
  .gallery {width:initial;height:initial;}
	.gallery .row {flex-direction:column;align-items:center;}
	.gallery .row img {width:400px;height:400px;}
	.lightboxContainer .lightbox .prev,.lightboxContainer .lightbox .next {margin:15px;}
}
@media only screen and (max-width: 500px) {
  .gallery .row img {width:300px;height:300px;}
}
@media only screen and (max-width: 400px) {
  .gallery .row img {width:250px;height:250px;}
}