body {
  background-image: url("pics/kreta_bg.webp");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /*background-position-y: -150px;*/
  background-position-x: center;
  height: auto;
}

.gal-wrap {
  min-height: 800px;
  background: rgba(100,150,200,.4);
  padding-top: 100px;
  
}

h2 {
  color: #CDE;
  font-size: 2.8em;
  text-align: center;
}

.gal-box {
  width: 90%;
  height: auto;
  /*background: rgba(0,0,0, .5);*/
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  padding: 0px 0px 100px 0px;
  max-width: 1050px;
}

.img-box {
  /*border: 1px solid red;*/
  cursor: pointer;
  min-height: 100px;
  margin: 10px;

  padding: 0;
  overflow: hidden;
  box-shadow: 10px 10px 22px 0px rgba(250,250,250,0.3);
  /*border: 4px solid rgba(0,0,50,.1);
  border-radius: 4px;*/

}

.img-box img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin: 0;
  transition: all 1s;
  filter: grayscale(50%) brightness(80%);

}

.img-box img:hover {
  transform: scale(1.2, 1.2);
  filter: grayscale(0%) brightness(100%);
  
}

/*MODAL*/
.modal-wrap {
  background: rgba(0,0,0,.7);
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  min-width: 100%;
  height: 100vh;
}
.close-modal {
  position: absolute;
  top: 0px;
  right: 10px;
  color: #DDD;
  font-size: 3em;
  cursor: pointer;
}

.modal-box {
  display: flex;
  margin: auto;
  width: 100%;
  height: 100%;
  /*border: 1px solid pink;*/
  justify-content: space-evenly;
  align-items: center;
}

.modal-img {
  width: 80%;
  height: auto;
}

.prev, .next {
  color: #DDD;
  font-size: 3em;
  cursor: pointer;
}