.gallery {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/*.gallery h2 {
  color: var(----white-, #f7f7f7);
  text-align: center;

  /* glow:active] */
  text-shadow: 0px 4px 50px #3b74a8;
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: left;
}*/

.gal-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.gal-item {
  /* height: 178px; */
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  flex: auto;
  margin:10px;
}
.gal-item:hover {
  box-shadow: 0 0 20px #3b74a8;
}
.gal-item img {
  margin: 0;
  width: 100%;
}

.gal-preview {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #14141a;
  z-index: 7777;
}

.gal-preview.show {
  display: block;
}

.gal-img {
  display: block;
  width: 800px;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 900px) {
  .gal-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media (max-width: 500px) {
  .page-wrapper {
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
  }
  .gal-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}