@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Armenian:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
.gallery-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.gallery-image {
  flex-shrink: 0;
  width: calc(33.3333333333% - 12px);
  cursor: pointer;
  height: 240px;
  overflow: hidden;
  border-radius: 6px;
}
.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
  display: block;
}
.gallery-image:hover img {
  transform: scale(1.05);
}
@media screen and (max-width: 768px) {
  .gallery-image {
    height: 200px;
  }
}
@media screen and (max-width: 468px) {
  .gallery-image {
    height: 140px;
  }
}

.gallery-block.gallery-block-8 .gallery-image:nth-child(1), .gallery-block.gallery-block-8 .gallery-image:nth-child(3), .gallery-block.gallery-block-8 .gallery-image:nth-child(6), .gallery-block.gallery-block-8 .gallery-image:nth-child(8) {
  width: calc(25% - 12px);
}

.gallery-block.gallery-block-8 .gallery-image:nth-child(2), .gallery-block.gallery-block-8 .gallery-image:nth-child(4), .gallery-block.gallery-block-8 .gallery-image:nth-child(5), .gallery-block.gallery-block-8 .gallery-image:nth-child(7) {
  width: calc(50% - 12px);
}

.gallery-block.gallery-block-7 .gallery-image:nth-child(1), .gallery-block.gallery-block-7 .gallery-image:nth-child(3), .gallery-block.gallery-block-7 .gallery-image:nth-child(6) {
  width: calc(25% - 12px);
}

.gallery-block.gallery-block-7 .gallery-image:nth-child(2), .gallery-block.gallery-block-7 .gallery-image:nth-child(4), .gallery-block.gallery-block-7 .gallery-image:nth-child(5) {
  width: calc(50% - 12px);
}

.gallery-block.gallery-block-7 .gallery-image:nth-child(7) {
  width: calc(75% - 12px);
}

.gallery-block.gallery-block-6 .gallery-image:nth-child(1), .gallery-block.gallery-block-6 .gallery-image:nth-child(3) {
  width: calc(25% - 12px);
}

.gallery-block.gallery-block-6 .gallery-image:nth-child(2) {
  width: calc(50% - 12px);
}

.gallery-block.gallery-block-6 .gallery-image:nth-child(4), .gallery-block.gallery-block-6 .gallery-image:nth-child(5), .gallery-block.gallery-block-6 .gallery-image:nth-child(6) {
  width: calc(33.3333333333% - 12px);
}

.gallery-block.gallery-block-5 .gallery-image:nth-child(1), .gallery-block.gallery-block-5 .gallery-image:nth-child(3) {
  width: calc(25% - 12px);
}

.gallery-block.gallery-block-5 .gallery-image:nth-child(2) {
  width: calc(50% - 12px);
}

.gallery-block.gallery-block-5 .gallery-image:nth-child(4), .gallery-block.gallery-block-5 .gallery-image:nth-child(5) {
  width: calc(50% - 12px);
}

.gallery-block.gallery-block-4 .gallery-image:nth-child(1), .gallery-block.gallery-block-4 .gallery-image:nth-child(4) {
  width: calc(60% - 12px);
}

.gallery-block.gallery-block-4 .gallery-image:nth-child(2), .gallery-block.gallery-block-4 .gallery-image:nth-child(3) {
  width: calc(40% - 12px);
}

#gallery-background {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  user-select: none;
  animation: gallery-open-bg 0.2s ease;
  overflow: hidden;
}
@keyframes gallery-open-image {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
@keyframes gallery-open-bg {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
#gallery-background .gallery-close-button {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
  cursor: pointer;
}
#gallery-background .gallery-close-button svg {
  width: 24px;
  height: 24px;
  color: #FFFFFF;
  transition: 0.1s ease;
}
#gallery-background .gallery-close-button:hover svg {
  transform: scale(1.1);
}
#gallery-background .gallery-close-button:active svg {
  transform: scale(0.9);
}
#gallery-background #gallery-preview {
  max-width: calc(100% - 24px);
  height: calc(100% - 84px);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#gallery-background #gallery-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  animation: gallery-open-image 0.2s ease;
}
#gallery-background .gallery-button {
  position: absolute;
  height: 100%;
  justify-content: center;
  top: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: calc(100% - 56px);
}
#gallery-background .gallery-button svg {
  width: 32px;
  height: 32px;
  color: #FFFFFF;
  transition: 0.1s ease;
}
#gallery-background .gallery-button.gallery-button-left {
  left: 0;
}
#gallery-background .gallery-button.gallery-button-right {
  left: unset;
  right: 0;
}
#gallery-background .gallery-button:hover {
  background: rgba(0, 0, 0, 0.2);
}
#gallery-background .gallery-button:hover svg {
  transform: scale(1.1);
}
#gallery-background .gallery-button:active svg {
  transform: scale(0.9);
}
#gallery-background #gallery-control-container {
  width: calc(100% - 24px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  overflow-x: auto;
  padding: 3px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#gallery-background #gallery-control-container::-webkit-scrollbar {
  display: none;
}
#gallery-background #gallery-control-container .gallery-control-item {
  width: 40px;
  height: 24px;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: transform 0.2s ease;
}
#gallery-background #gallery-control-container .gallery-control-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#gallery-background #gallery-control-container .gallery-control-item:hover {
  border-color: #FFFFFF;
  transform: scale(1.2);
}
#gallery-background #gallery-control-container .gallery-control-item.active {
  transform: scale(1.2);
  border-color: #FFFFFF;
}

/*# sourceMappingURL=gallery.css.map */