@media (min-width:992px) {
  html {
    body {
      &.adminimal-admin-toolbar,
      &.toolbar-horizontal.toolbar-fixed {
        #image-grid-modal {
          padding-top: 98px !important;

          .modal-dialog {
            &.modal-dialog-centered {
              min-height: calc(100vh - 118px);
              min-height: calc(100dvh - 118px);

              .modal-content {
                .modal-body {
                  height: calc(100vh - 118px);
                  height: calc(100dvh - 118px);
                  max-height: calc(100vh - 118px);
                  max-height: calc(100dvh - 118px);
                }
              }
            }
          }
        }

        &.toolbar-tray-open {
          #image-grid-modal {
            padding-top: 138px !important;

            .modal-dialog {
              &.modal-dialog-centered {
                min-height: calc(100vh - 158px);
                min-height: calc(100dvh - 158px);

                .modal-content {
                  .modal-body {
                    height: calc(100vh - 158px);
                    height: calc(100dvh - 158px);
                    max-height: calc(100vh - 158px);
                    max-height: calc(100dvh - 158px);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #image-grid-modal {
    padding: 20px !important;
    overflow: hidden !important;

    .modal-dialog {
      &.modal-dialog-centered {
        width: calc(100vw - 40px);
        min-height: calc(100vh - 40px);
        min-height: calc(100dvh - 40px);
        max-width: 960px;
        margin: 0 auto !important;
        align-items: center;

        .modal-content {
          height: 100%;

          .a-close {
            top: 15px;
            right: 15px;
          }

          .modal-body {
            position: relative;
            height: calc(100vh - 40px);
            height: calc(100dvh - 40px);
            max-height: calc(100vh - 40px);
            max-height: calc(100dvh - 40px);
            overflow: hidden;

            .owl-carousel {
              position: relative;
              top: auto;
              left: auto;
              height: 100%;

              .owl-stage-outer,
              .owl-stage,
              .owl-item,
              .m-image {
                height: 100%;
              }

              .owl-nav,
              + .m-buttons {
                z-index: 2;
              }

              .owl-nav {
                top: 50%;
                right: 0;
                bottom: auto;
                left: 0;
                width: 100%;
                transform: translateY(-50%);
                pointer-events: none;

                button {
                  &.owl-prev,
                  &.owl-next {
                    position: absolute;
                    margin: 0;
                    pointer-events: auto;
                    transform: translateY(-50%);
                    top: 50%;
                  }

                  &.owl-prev {
                    left: 15px;
                  }

                  &.owl-next {
                    right: 15px;
                  }
                }
              }

              .owl-item {
                .m-image {
                  img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (min-width:1200px) {
  #image-grid-modal {
    .modal-dialog {
      &.modal-dialog-centered {
        max-width: 1200px;
      }
    }
  }
}

@media (min-width:1400px) {
  #image-grid-modal {
    .modal-dialog {
      &.modal-dialog-centered {
        width: calc(100vw - 40px);
        max-width: 1400px;
      }
    }
  }
}