.lg-backdrop,
.lg-outer {
  max-height: 100vh;
}

body.lg-on {
  overflow-y: hidden;

  #page-wrapper {
    overflow: hidden;
  }
}

.gallery-container {
  &:not(.justified-gallery) {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: $padding-padding-sm;

    &:has(> a:nth-child(2):nth-last-child(1)) {

      @include media-breakpoint-up(xl) {
        a {
          height: rem-calc(331);
        }
      }

      @include media-breakpoint-up(xxl) {
        a {
          height: rem-calc(412);
        }
      }
    }

    @include media-breakpoint-up(sm) {
      gap: $padding-padding-lg;
      flex-direction: row;
      flex-wrap: wrap;
    }

    @include media-breakpoint-up(md) {
      gap: $padding-padding-xlg $padding-padding-lg;
    }

    @include media-breakpoint-up(xl) {
      gap: $padding-padding-xlg;
    }

    a {
      height: rem-calc(170.296);

      @include media-breakpoint-up(sm) {
        flex: 1 1 40%;
        height: rem-calc(188);
        width: rem-calc(336);

        &:only-child {
          height: rem-calc(389);
        }
      }

      @include media-breakpoint-up(xl) {
        flex: 1 1 20%;
        height: rem-calc(157);
        width: rem-calc(280);
      }

      @include media-breakpoint-up(xxl) {
        height: rem-calc(197);
        width:  rem-calc(352);

        &:only-child {
          height: rem-calc(412);
        }
      }

      &:focus-visible {
        outline-offset: 3px;
        outline-color: $primary;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.lg-close:after {
  background-color: black;
  box-shadow: 0 0 0 rem-calc(3) black;
}

.lg-download::after {
  background-color: black;
  box-shadow: 0 0 0 rem-calc(3) black;
}

.lg-counter {
  padding: rem-calc(5) !important;
  height: auto !important;
  margin-left: rem-calc(20);
  margin-top: rem-calc(12);
  background-color: black;
  box-shadow: 0 0 0 rem-calc(3) black;
}

.lg-icon:focus-visible {
  outline-width: 2px !important;
}
