#portfolio {
  display: block;

  flex-wrap: wrap;
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
}

#portfolio li {
  /*display: block;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  width: 17.5%; 
	height: 200px; 
	float: left;
	background-size: cover;
	background-position: center center;*/
	background-color: #FAFAFA;
	margin-bottom: 35px;
	/*cursor: zoom-in;*/
  list-style:none;
}
#portfolio li img {
    /*width: 100%;
    height: 200px;*/
    width: 100%;
    height: 15.625rem;
    object-fit: cover;
    object-position: 50% 50%;
}

#portfolio li a {
  display: block;
}

.mfp-title {
  font-size: 1.2em;
  color: #ddd !important;
  font-weight: 700;
}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


/** media queries **/
@media screen and (max-width: 780px) {
  #portfolio li {
    /*width: 45%;*/
  }
}

@media screen and (max-width: 550px) {
  #portfolio { 
    text-align: center;
  }
  
  #portfolio li {
    float: none;
    display: inline-block;
    /*width: 80%;*/
    margin-bottom: 30px;
  }
}