/* ================================= */
/*          IMAGE COLLAGE            */
/* ================================= */

.imagecollage.placeholder {
  padding-bottom: 50%;
}

.single.placeholder {
  padding-bottom: 133%;
}
.collage.unprocessed figure {
  width: 17%;
  display: inline-block;
  aspect-ratio: 16 / 9;
}
.collage figure a {
  cursor: zoom-in;
}

.image-collage-expand-icon {
  display: inline-block;
  position: relative;
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem 0 0;
  padding: 0;
  vertical-align: text-bottom;
}

.image-collage-expand-caption {
  display: inline;
  position: relative;
  margin: 0 1rem 0 0;
  padding: 0;
  font-weight: 700;
  font-size: 0.75rem;
  color: #737373;
}

.image-collage .media-caption,
.image-popup .media-caption {
  padding: 0.75rem 0;
  margin: 0 0 1rem 0;
  border-bottom: 1px solid #ccc;
  max-width: 100%;
  box-sizing: border-box;
}

a.collage-image-link:hover img,
a.collage-image-link:focus img {
  filter: brightness(50%);
}


.fourGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
}

.fourGallery.landscape32,
.fourGallery.square {
    grid-column-gap: 3vw;
    grid-row-gap: 3vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.fourGallery>.div1 {
    grid-area: 1 / 1 / 2 / 3;
    aspect-ratio: 237 / 130;
}
.fourGallery>.div2 {
    grid-area: 1 / 3 / 2 / 4;
    aspect-ratio: 9 / 10;
}
.fourGallery>.div3 {
    grid-area: 2 / 1 / 3 / 2;
    aspect-ratio: 9 / 10;
}
.fourGallery>.div4 {
    grid-area: 2 / 2 / 3 / 4;
    aspect-ratio: 237 / 130;
}

.fourGallery.flip>.div1 {
    grid-area: 1 / 1 / 2 / 2;
    aspect-ratio: 237 / 130;
}
.fourGallery.flip>.div2 {
    grid-area: 1 / 2 / 2 / 4;
    aspect-ratio: 9 / 10;
}
.fourGallery.flip>.div3 {
    grid-area: 2 / 1 / 3 / 3;
    aspect-ratio: 237 / 130;
}
.fourGallery.flip>.div4 {
    grid-area: 2 / 3 / 3 / 4;
    aspect-ratio: 9 / 10;
}

div.collage.fourGallery.landscape32 .div1 {
    grid-area: 1 / 1 / 2 / 2;
    aspect-ratio: 3 / 2;
}
div.collage.fourGallery.landscape32 .div2 {
    grid-area: 1 / 2 / 2 / 3;
    aspect-ratio: 3 / 2;
}
div.collage.fourGallery.landscape32 .div3 {
    grid-area: 2 / 1 / 3 / 2;
    aspect-ratio: 3 / 2;
}
div.collage.fourGallery.landscape32 .div4 {
    grid-area: 2 / 2 / 3 / 3;
    aspect-ratio: 3 / 2;
}

div.collage.fourGallery.square .div1 {
    grid-area: 1 / 1 / 2 / 2;
    aspect-ratio: 1 / 1;
}
div.collage.fourGallery.square .div2 {
    grid-area: 1 / 2 / 2 / 3;
    aspect-ratio: 1 / 1;
}
div.collage.fourGallery.square .div3 {
    grid-area: 2 / 1 / 3 / 2;
    aspect-ratio: 1 / 1;
}
div.collage.fourGallery.square .div4 {
    grid-area: 2 / 2 / 3 / 3;
    aspect-ratio: 1 / 1;
}


.fiveGallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
}

.fiveGallery>.div1 {
    grid-area: 1 / 1 / 3 / 3;
    aspect-ratio: 325 / 178;
}
.fiveGallery>.div2 {
    grid-area: 1 / 3 / 2 / 4;
    aspect-ratio: 320 / 173;
}
.fiveGallery>.div3 {
    grid-area: 3 / 1 / 4 / 2;
    aspect-ratio: 320 / 173;
}
.fiveGallery>.div4 {
    grid-area: 3 / 2 / 4 / 3;
    aspect-ratio: 320 / 173;
}
.fiveGallery>.div5 {
    grid-area: 2 / 3 / 4 / 4;
    aspect-ratio: 160 / 178;
}

.fiveGallery.flip>.div1 {
    grid-area: 1 / 1 / 2 / 2;
    aspect-ratio: 320 / 173;
}
.fiveGallery.flip>.div2 {
    grid-area: 1 / 2 / 3 / 4;
    aspect-ratio: 325 / 178;
}
.fiveGallery.flip>.div3 {
    grid-area: 2 / 1 / 4 / 2;
    aspect-ratio: 160 / 178;
}
.fiveGallery.flip>.div4 {
    grid-area: 3 / 2 / 4 / 3;
    aspect-ratio: 320 / 173;
}
.fiveGallery.flip>.div5 {
    grid-area: 3 / 3 / 4 / 4;
    aspect-ratio: 320 / 173;
}

.collage img {
    width: 100%;
    height:100%;
    object-fit: cover;
    display: block;
}

.collage figure {
    display: block;
    margin: 0;
}

.collage figcaption {
    display: none;
}

@media only screen and (max-width: 66.25rem) {
  .image-collage .media-caption {
    padding: 0.75rem 0.5rem;
  }
}

@media only screen and (max-width: 42.5rem) {
  .image-popup .media-caption {
    padding: 0.75rem 0.5rem;
  }
}