.gallery {
  position: relative;
  background-color: var(--background-tertiary);
  width: 100%;
}
.ul-gallery {
  padding: 40px 10px;
  list-style: none;
  column-gap: 10px; /* فاصله بین ستون‌ها */
  columns: 4; /* تعداد ستون‌ها */
  -webkit-columns: 4;
  -moz-columns: 4;
}
.ul-gallery .gallery-item {
  display: inline-block;
  /* آیتم‌ها به‌صورت بلاک نمایش داده می‌شوند */
  width: 100%;
  margin-bottom: 0px; /* فاصله پایین آیتم‌ها */
  transition: all 0.2s ease-in-out;
  transform: scale(0.97);
}

.gallery-item:hover {
  transform: scale(1.05);
}

@media (min-width: 650px) {
  .ul-gallery {
    width: 90%;
    margin-left: 5%;
    columns: 5; /* تعداد ستون‌ها */
    -webkit-columns: 5;
    -moz-columns: 5;
  }
}
@media (min-width: 768px) {
  .ul-gallery {
    columns: 7; /* تعداد ستون‌ها */
    -webkit-columns: 7;
    -moz-columns: 7;
  }
}
@media (min-width: 1024px) {
  .ul-gallery {
    width: 70%;
    margin-left: 15%;
    columns: 8; /* تعداد ستون‌ها */
    -webkit-columns: 8;
    -moz-columns: 8;
  }
}
@media (min-width: 1200px) {
  .ul-gallery {
    columns: 10; /* تعداد ستون‌ها */
    -webkit-columns: 10;
    -moz-columns: 10;
  }
}

.lightbox {
  display: none; /* مخفی بودن لایت باکس */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 999998;
}
.lightbox-content {
  max-width: 90%;
  max-height: 90%;
}
.close {
  position: absolute;
  width: 40px;
  height: 40px;
  display: grid;
  text-align: center;
  align-content: center;
  top: 20px;
  left: 30px;
  color: var(--white);
  background-color: var(--background-primary);
  font-size: 35px;
  cursor: pointer;
  border-radius: 50%;
  padding: 0 0 5px 0;
}