/* HOMEPAGE  */

.image-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    max-width: 100%;
    overflow: hidden;
    row-gap: 5rem;
}

/* Single image layout slots */
.wide-left      { grid-column: 2 / 9; }
.mid-right      { grid-column: 7 / 11; }
.full-left      { grid-column: 1 / 10; }
.full-right     { grid-column: 6 / 13; }
.wide-full-left { grid-column: 1 / 11; }
.center-wide    { grid-column: 3 / 12; }
.full-bleed     { grid-column: 1 / 13; }

/* Collage containers */
.collage-3 {
    grid-column: 1 / 13;
    position: relative;
    height: 80vh;
}

.collage-2 {
    grid-column: 3 / 11;
    position: relative;
    height: 90vh;
}

.collage-2b {
    grid-column: 2 / 13;
    position: relative;
    height: 70vh;
}

.collage-2c {
    grid-column: 1 / -1;
    position: relative;
    height: 130vh;
}

.collage-3 img,
.collage-2 img,
.collage-2b img,
.collage-2c img {
    position: absolute;
}

.image-grid img {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.image-grid img.is-visible {
    opacity: 1;
}

/* collage-3 slot positions */
.collage-3 .slot-a { bottom: 2rem; left: 0;   width: 25%; z-index: 1; }
.collage-3 .slot-b { top: 0;       left: 10%; width: 56%; }
.collage-3 .slot-c { bottom: 0;    right: 0;  width: 25%; }

/* collage-2 slot positions */
.collage-2 .slot-a { top: 0;    left: 0;  width: 40%; }
.collage-2 .slot-b { bottom: 0; right: 0; width: 70%; }

/* collage-2b slot positions */
.collage-2b .slot-a { bottom: 0; left: 0;  width: 52%; }
.collage-2b .slot-b { top: 0;    right: 0; width: 52%; }

/* collage-2c slot positions */
.collage-2c .slot-a { top: 0; left: 0;  width: 65%; }
.collage-2c .slot-b { bottom: 0;    right: 0; width: 65%; }

/* RESPONSIVES */

@media screen and (max-width: 768px) {
    .wide-left      { grid-column: 1 / 11; }
    .mid-right      { grid-column: 5 / 13; }
    .full-left,
    .full-right,
    .wide-full-left,
    .center-wide,
    .full-bleed     { grid-column: 1 / 13; }

    .collage-3,
    .collage-2b     { height: 50vh; }

    .collage-3 .slot-a { width: 45%; }
    .collage-3 .slot-c { width: 45%; }

    .collage-2 .slot-a  { width: 80%; }
    .collage-2b .slot-a { width: 69%; }
}