/* MEDIA QUERIES */

@media not all and (min-width: 1536px) {
  .gg-content {
    gap: var(--gap-block-1536, var(--gap-block)) !important;
  }

  .gg-cont-filters {
    gap: var(--gap-filter-1536, var(--gap-filter)) !important;
  }

  .gg-grid {
    grid-template-columns: repeat(
      var(--grid-col-1536, var(--grid-col)),
      minmax(0, 1fr)
    ) !important;
    gap: var(--gap-grid-1536, var(--gap-grid)) !important;
  }
}

@media not all and (min-width: 1280px) {
  .gg-content {
    gap: var(
      --gap-block-1280,
      var(--gap-block-1536, var(--gap-block))
    ) !important;
  }

  .gg-cont-filters {
    gap: var(
      --gap-filter-1280,
      var(--gap-filter-1536, var(--gap-filter))
    ) !important;
  }

  .gg-grid {
    grid-template-columns: repeat(
      var(--grid-col-1280, var(--grid-col-1536, var(--grid-col))),
      minmax(0, 1fr)
    );
    gap: var(--gap-grid-1280, var(--gap-grid-1536, var(--gap-grid))) !important;
  }
}

@media not all and (min-width: 1024px) {
  .gg-content {
    gap: var(
      --gap-block-1024,
      var(--gap-block-1280, var(--gap-block-1536, var(--gap-block)))
    ) !important;
  }

  .gg-cont-filters {
    gap: var(
      --gap-filter-1024,
      var(--gap-filter-1280, var(--gap-filter-1536, var(--gap-filter)))
    ) !important;
  }

  .gg-grid {
    grid-template-columns: repeat(
      var(
        --grid-col-1024,
        var(--grid-col-1280, var(--grid-col-1536, var(--grid-col)))
      ),
      minmax(0, 1fr)
    ) !important;
    gap: var(
      --gap-grid-1024,
      var(--gap-grid-1280, var(--gap-grid-1536, var(--gap-grid)))
    ) !important;
  }
}

@media not all and (min-width: 768px) {
  .gg-content {
    gap: var(
      --gap-block-798,
      var(
        --gap-block-1024,
        var(--gap-block-1280, var(--gap-block-1536, var(--gap-block)))
      )
    ) !important;
  }

  .gg-cont-filters {
    gap: var(
      --gap-filter-768,
      var(
        --gap-filter-1024,
        var(--gap-filter-1280, var(--gap-filter-1536, var(--gap-filter)))
      )
    ) !important;
  }

  .gg-grid {
    grid-template-columns: repeat(
      var(
        --grid-col-768,
        var(
          --grid-col-1024,
          var(--grid-col-1280, var(--grid-col-1536, var(--grid-col)))
        )
      ),
      minmax(0, 1fr)
    ) !important;
    gap: var(
      --gap-grid-768,
      var(
        --gap-grid-1024,
        var(--gap-grid-1280, var(--gap-grid-1536, var(--gap-grid)))
      )
    ) !important;
  }

  .modale-img {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
  }

  .gg-img-modal {
    object-fit: contain !important;
  }
}

@media not all and (min-width: 640px) {
  .gg-content {
    gap: var(
      --gap-block-640,
      var(
        --gap-block-798,
        var(
          --gap-block-1024,
          var(--gap-block-1280, var(--gap-block-1536, var(--gap-block)))
        )
      )
    ) !important;
  }

  .gg-cont-filters {
    gap: var(
      --gap-filter-640,
      var(
        --gap-filter-768,
        var(
          --gap-filter-1024,
          var(--gap-filter-1280, var(--gap-filter-1536, var(--gap-filter)))
        )
      )
    ) !important;
  }

  .gg-grid {
    grid-template-columns: repeat(
      var(
        --grid-col-640,
        var(
          --grid-col-768,
          var(
            --grid-col-1024,
            var(--grid-col-1280, var(--grid-col-1536, var(--grid-col)))
          )
        )
      ),
      minmax(0, 1fr)
    ) !important;
    gap: var(
      --gap-grid-640,
      var(
        --gap-grid-768,
        var(
          --gap-grid-1024,
          var(--gap-grid-1280, var(--gap-grid-1536, var(--gap-grid)))
        )
      )
    ) !important;
  }
}

@media not all and (min-width: 390px) {
  .gg-content {
    gap: var(
      --gap-block-390,
      var(
        --gap-block-640,
        var(
          --gap-block-798,
          var(
            --gap-block-1024,
            var(--gap-block-1280, var(--gap-block-1536, var(--gap-block)))
          )
        )
      )
    ) !important;
  }

  .gg-cont-filters {
    gap: var(
      --grid-filter-390,
      var(
        --gap-filter-640,
        var(
          --gap-filter-768,
          var(
            --gap-filter-1024,
            var(--gap-filter-1280, var(--gap-filter-1536, var(--gap-filter)))
          )
        )
      )
    ) !important;
  }

  .gg-grid {
    grid-template-columns: repeat(
      var(
        --grid-col-390,
        var(
          --grid-col-640,
          var(
            --grid-col-768,
            var(
              --grid-col-1024,
              var(--grid-col-1280, var(--grid-col-1536, var(--grid-col)))
            )
          )
        )
      ),
      minmax(0, 1fr)
    ) !important;
    gap: var(
      --gap-grid-390,
      var(
        --gap-grid-640,
        var(
          --gap-grid-768,
          var(
            --gap-grid-1024,
            var(--gap-grid-1280, var(--gap-grid-1536, var(--gap-grid)))
          )
        )
      )
    ) !important;
  }
}

/* GENERAL */

@keyframes fadeUpGallery {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* FILTERS */

.gg-cont-filters {
  display: flex;
  align-items: center;
  gap: var(--gap-filter);
}

.gg-filter {
  font-family: var(--filter-font-family);
  font-size: var(--filter-font-size);
  padding-inline: var(--filter-padding-x);
  padding-block: var(--filter-padding-y);
  border-radius: var(--filter-border-radius);
  color: var(--filter-page-text-color);
  font-weight: var(--filter-font-weight);
  background: var(--filter-bg);
  border-width: var(--filter-border-width);
  border-style: var(--filter-border-style);
  border-color: var(--filter-border-color);
  transition: all 0.3s ease-out;
}

.gg-filter:not(.active):hover {
  color: var(--filter-hover-text-color);
  background: var(--filter-hover-bg);
  border-color: var(--filter-hover-border-color);
}

.gg-filter.active {
  color: var(--filter-active-text-color);
  font-weight: var(--filter-active-font-weight);
  background: var(--filter-active-bg);
  border-width: var(--filter-active-border-width);
  border-style: var(--filter-active-border-style);
  border-color: var(--filter-active-border-color);
  pointer-events: none;
}

/* MAIN GALLERY */

.gg-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.gg-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-col), minmax(0, 1fr));
  gap: var(--gap-grid);
}

.gg-item {
  width: 100%;
  height: auto;
  aspect-ratio: var(--img-aspect, 1/1);
  border-radius: var(--img-radius, 0px);
  overflow: hidden;
  cursor: pointer;
}

.gg-click-img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* ANIMATION IMAGES */

.gg-click-img.gg-anim-scale {
  transform: scale(1);
  transition: transform 0.4s ease-out;
}

.gg-click-img.gg-anim-scale:hover {
  transform: scale(1.05);
}

.gg-click-img.gg-anim-grayscale {
  filter: grayscale(0);
  transition: filter 0.3s ease-out;
}

.gg-click-img.gg-anim-grayscale:hover {
  filter: grayscale(1);
}

/* PAGINATION */

.hidden-prev-btn,
.hidden-next-btn {
  opacity: 50%;
  pointer-events: none;
}

.gg-paginations {
  display: flex;
  gap: var(--pagination-gap);
}

.gg-paginations button {
  padding-inline: var(--btn-padding-x);
  padding-block: var(--btn-padding-y);
  border-radius: var(--btn-border-radius);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
}

.gg-pagination:not(.active),
.gg-btn-first,
.gg-btn-prev,
.gg-btn-next,
.gg-btn-last {
  color: var(--btn-page-text-color);
  background: var(--btn-page-bg);
  font-weight: var(--btn-page-font-weight);
  transition: all 0.3s ease-out;
}

.gg-pagination:not(.active):hover,
.gg-btn-first:hover .gg-btn-prev:hover,
.gg-btn-next:hover,
.gg-btn-last:hover {
  color: var(--btn-hover-page-text-color);
  background: var(--btn-hover-page-bg);
}

.gg-btn-first svg,
.gg-btn-prev svg,
.gg-btn-next svg,
.gg-btn-last svg {
  stroke: var(--btn-page-text-color);
  transition: stroke 0.3s ease-out;
}

.gg-btn-first:hover svg,
.gg-btn-prev:hover svg,
.gg-btn-next:hover svg,
.gg-btn-last:hover svg {
  stroke: var(--btn-hover-page-text-color);
}

.gg-pagination.active {
  color: var(--btn-active-text-color);
  font-weight: var(--btn-active-font-weight);
  background: var(--btn-active-bg);
  pointer-events: none;
}

.gg-seperating-dots {
  display: flex;
  align-items: center;
}

/* MODAL IMAGE */

@keyframes fadeInModal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOutModal {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.gg-modal-img {
  position: fixed;
  display: none;
  flex-direction: column;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
  padding-top: var(--modal-pt);
  margin-left: 0 !important;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 1001;
}

.gg-modal-img.preview {
  display: flex;
  width: calc(100vw - 280px);
  height: calc(100vh - 64px);
  top: 64px;
}

.gg-container-div-img {
  width: 100%;
  height: calc(100% - 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.gg-div-img-modal {
  overflow: hidden;
  height: 100%;
}

.gg-modal-img.preview .gg-div-img-modal {
  width: 50%;
  background: white;
  border-radius: var(--modal-img-radius);
}

.gg-img-modal {
  height: 100%;
  object-fit: cover;
  cursor: default;
  border-radius: var(--modal-img-radius);
}

.gg-icon-close-modal {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}

.gg-icon-close-modal svg {
  stroke: var(--cross-color);
  transition: stroke 0.3s ease-out;
}

.gg-icon-close-modal:hover svg {
  stroke: var(--hover-cross-color);
}

/* LOADERS */

.gg-overlay-loading {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px);
}

.gg-overlay-loading.active,
.gg-overlay-loading.preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gg-loader.spinner-one {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--loader-color);
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l2 1s infinite linear;
}
@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}

.gg-loader.spinner-two {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--loader-color);
  -webkit-mask: repeating-conic-gradient(
      #0000 0deg,
      #000 1deg 70deg,
      #0000 71deg 90deg
    ),
    radial-gradient(
      farthest-side,
      #0000 calc(100% - var(--b) - 1px),
      #000 calc(100% - var(--b))
    );
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation: l3 1s infinite;
}
@keyframes l3 {
  to {
    transform: rotate(0.5turn);
  }
}

.gg-loader.spinner-three {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, var(--loader-color) 94%, #0000)
      top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--loader-color));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: l4 1s infinite linear;
}
@keyframes l4 {
  100% {
    transform: rotate(1turn);
  }
}

.gg-loader.spinner-four {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--loader-color);
  animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
@keyframes l20-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }
  25% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }
  50% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  62.5% {
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  75% {
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}
@keyframes l20-2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}

.gg-loader.dots-one {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat
    radial-gradient(circle closest-side, var(--loader-color) 90%, #0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: calc(100% / 3) 50%;
  animation: l1 1s infinite linear;
}

@keyframes l1 {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }

  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }

  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }

  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}

.gg-loader.dots-two {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat
    radial-gradient(circle closest-side, var(--loader-color) 90%, #0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: calc(100% / 3) 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
  33% {
    background-size: calc(100% / 3) 0%, calc(100% / 3) 100%, calc(100% / 3) 100%;
  }
  50% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 0%, calc(100% / 3) 100%;
  }
  66% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 0%;
  }
}

.gg-loader.dots-three {
  color: var(--loader-color);
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: l21 0.5s infinite alternate linear;
}

@keyframes l21 {
  50% {
    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
  }
  100% {
    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
  }
}

.gg-loader.bars-one {
  width: 45px;
  aspect-ratio: 0.75;
  --c: no-repeat linear-gradient(var(--loader-color) 0 0);
  background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%;
  background-size: 20% 50%;
  animation: l6 1s infinite linear;
}
@keyframes l6 {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }
  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }
  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }
  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}

/* HTML: <div class="loader"></div> */
.gg-loader.bars-two {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(var(--loader-color) 0 0);
  background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}
@keyframes l1 {
  0% {
    background-size: 20% 100%, 20% 100%, 20% 100%;
  }
  33% {
    background-size: 20% 10%, 20% 100%, 20% 100%;
  }
  50% {
    background-size: 20% 100%, 20% 10%, 20% 100%;
  }
  66% {
    background-size: 20% 100%, 20% 100%, 20% 10%;
  }
  100% {
    background-size: 20% 100%, 20% 100%, 20% 100%;
  }
}