/*
CSS Name: Custom Styles
Description: NextGEN Default Gallery Stylesheet
Author: Imagely
Version: 2.13

This stylesheet is provided to allow users the ability of overriding the default styles for all display types
*/

.ngg-galleryoverview.default-view {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 250px 200px;
  grid-auto-flow: dense;
}
.ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box {
  overflow: hidden;
}
.ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box .ngg-gallery-thumbnail {
    width: 100%;
    height: 100%;
  }
.ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box a {
   height: 100%;
   width: 100%;
   margin: 0;
}
.ngg-galleryoverview.default-view .ngg-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}
.ngg-galleryoverview.default-view .ngg-gallery-thumbnail img:hover {
  transform: scale(1.1);
}
@media screen and (min-width: 769px) {
  .ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box:nth-child(1) {
    grid-area: 1 / 1 / span 2 / span 3;
  }
  .ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box:nth-child(2) {
    grid-area: span 2 / span 2;
  }
  .ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box:nth-child(3) {
    grid-column: span 2;
  }

}

@media screen and (max-width: 769px) {
  .ngg-galleryoverview.default-view {
    grid-auto-rows: auto;
  }
}