.gallery-items, .gallery-items a
{
    color: var(--dark-color);
}

.gallery-items
{
  position:relative;
  width:100%;
  padding-right:100px;
  padding-left:100px;
  min-height:300px;
  align:center;
  margin:40px auto;
  display:flex;
  flex-wrap: wrap;
  align-content: center;
  align-items:flex-start;
  justify-content: center;
}

.gallery-item
{
  position:relative;
  flex-grow:0;
  width:254px;
  min-height:300px;
  margin:20px;
}



.gallery-item:hover .gallery-item-img
{
  box-shadow:0px 2px 3px rgba(0,0,0,0.3);
}

.gallery-item:hover .gallery-item-details,
.gallery-item:hover .gallery-item-details h3
{
  font-weight: bold;
}




.gallery-item-img
{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 5px;
  overflow:hidden;
}

.gallery-item img
{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  object-fit: cover;
  cursor:pointer;
}


.gallery-item-details
{
  position:relative;
  left:0px;
  bottom:0px;
  width:100%;
  margin-top:0em;
  cursor:pointer;
  height:45px;
  display:flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.gallery-item-details h3
{
  width:100%;
  font-size:1.1em;
  font-weight:normal;
  letter-spacing: 0.1em;
  margin:0px;
  padding:0px;
  text-align: center;
}

.gallery-details
{
  position:relative;
  display:none;
  background-color:#FAFAFA;
  border:1px solid #ECECEC;
  margin-left:100px;
  display:flex;
  justify-content: center;
  border-radius:5px;
}


@media screen and (max-width: 900px)
{
  .gallery-items
    {
      padding-left:40px;
      padding-right:40px;
    }


}

@media screen and (max-width: 600px)
{
  .gallery-items
  {
    padding-left:0px;
    padding-right:0px;
  }

}