/* Gallery Image component CSS courtesy of Stockton University */

/* Block Style using FlexBox */

.gallery-square {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-square.col-4 .grid-item {
  flex: 0 0 calc(100% / 4);
}

.gallery-square.col-3 .grid-item {
  flex: 0 0 calc(100% / 3);
}

.gallery-square.col-2 .grid-item {
  flex: 0 0 50%;
}

.gallery-square .grid-item {
  padding-right: 10px;
  padding-bottom: 10px;
}

.gallery-square .grid-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
}

.gallery-square p.caption {
  padding-left: 10px;
  padding-right: 10px;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-bottom: 20px;
}

.gallery-square a p.caption {
  color: #333;
  font-size: 13px;
}

@media (max-width: 470px) {
  .gallery-square.col-2 div,
  .gallery-square.col-3 div,
  .gallery-square.col-4 div {
    height: 150px;
    width: 150px;
  }
}

/* Masonry Style using Magic Grid JS */

.gallery-masonry .grid-item img {
  padding-bottom: 10px;
  padding-right: 10px;
}

.gallery-masonry .grid-item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.gallery-masonry .grid-item > a {
  display: block;
}

.gallery-masonry .grid-item .caption {
  margin: 0;
}

.gallery-masonry.col-4 .grid-item img,
.gallery-masonry.col-4 .grid-item .caption,
.gallery-masonry.col-3 .grid-item img,
.gallery-masonry.col-3 .grid-item .caption,
.gallery-masonry.col-2 .grid-item img,
.gallery-masonry.col-2 .grid-item .caption {
  width: 100%;
  height: auto;
}

.gallery-masonry p.caption {
  margin-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 12px;
}

.gallery-masonry a p.caption {
  color: #333;
  font-size: 13px;
}

.gallery-masonry.col-2 {
  column-count: 2;
  column-gap: 12px;
}

.gallery-masonry.col-3 {
  column-count: 3;
  column-gap: 12px;
}

.gallery-masonry.col-4 {
  column-count: 4;
  column-gap: 12px;
}

/* Ensure gallery sections span full width in the site grid layout */
.Section:has(.gallery-masonry) {
  grid-template-columns: 1fr;
}

.Section:has(.gallery-masonry) > .Common {
  grid-column: 1 / -1;
  justify-self: stretch;
}

@media (max-width: 980px) {
  .gallery-masonry.col-4 {
    column-count: 2;
  }
}
@media (max-width: 768px) {
  .gallery-masonry.col-2,
  .gallery-masonry.col-3,
  .gallery-masonry.col-4 {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .gallery-masonry.col-2,
  .gallery-masonry.col-3 {
    column-count: 1;
  }
}

.Section:has(.gallery-square) {
  grid-template-columns: 1fr;
}

.Section:has(.gallery-square) > .Common {
  grid-column: 1 / -1;
  justify-self: stretch;
}

@media (max-width: 980px) {
  .gallery-square.col-4 .grid-item {
    flex: 0 0 calc(100% / 2);
  }
}
@media (max-width: 768px) {
  .gallery-square.col-3 .grid-item {
    flex: 0 0 calc(100% / 2);
  }
}

@media (max-width: 500px) {
  .gallery-square.col-4 .grid-item,
  .gallery-square.col-3 .grid-item,
  .gallery-square.col-2 .grid-item {
    flex: 0 0 calc(100%);
  }
}