@charset "utf-8";

* { margin: 0; padding: 0;}

.works-main {
    display: flex;
  flex-direction: column; 
  align-items: center;
  margin-top: 60px;
}

.gallery {
  columns: 100px;
  column-gap: 5px;

  padding: 40px 16px 60px;
}

.gallery__img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
    .gallery{
        margin-top: 100px;
    }
}

@media screen and (min-width: 425px) and (max-width: 499px) {
    .gallery {
        columns:120px
}

}
@media screen and (min-width: 500px) and (max-width: 646px) {
    .gallery {
        columns:150px
}
}

@media screen and (min-width: 647px) and (max-width: 831px) {
    .gallery {
        columns:200px
}
}
@media screen and (min-width: 832px) and (max-width: 1046px) {
    .gallery {
        columns:250px
}
}
@media screen and (min-width: 1047px) and (max-width: 1101px) {
    .gallery {
        columns:300px
}
}
@media screen and (min-width:1102px) {
    .gallery {
        columns: 350px;
        column-gap: 10px;
  
    }
    .gallery img {
  margin-bottom: 10px;
    }
}


.fadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeIn.animated {
  opacity: 1;
  transform: translateY(0);
}

.modal {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
  position: fixed;
    top: 50%;
    left: 50%;
     transform: translate(-50%, -50%);
}

.modal__close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}