.mosaic-gallery {
    display:grid;
    gap:16px;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-areas:
        "a b c d"
        "a e e f"
        "g h i i";
}

/* map tiles to areas */
.mosaic-gallery .tile--1 { grid-area:a; }
.mosaic-gallery .tile--2 { grid-area:b; }
.mosaic-gallery .tile--3 { grid-area:c; }
.mosaic-gallery .tile--4 { grid-area:d; }
.mosaic-gallery .tile--5 { grid-area:e; }
.mosaic-gallery .tile--6 { grid-area:f; }
.mosaic-gallery .tile--7 { grid-area:g; }
.mosaic-gallery .tile--8 { grid-area:h; }
.mosaic-gallery .tile--9 { grid-area:i; }
.mosaic-gallery .tile--10 { grid-area:j; }

.mosaic-gallery .wp-block-image,
.mosaic-gallery figure {
    margin: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
    img {
        height: 100%;
    }
}
.mosaic-gallery .is-odd {
    height: 450px;
}
.mosaic-gallery .is-even {
    height: 300px;
}
@media(min-width: 600px) {
    .mosaic-gallery .tile {
        height: 300px;
        img {
            height: 100%;
        }
    }
    .mosaic-gallery .tile--1,
    .mosaic-gallery .tile--4,
    .mosaic-gallery .tile--6,
    .mosaic-gallery .tile--9 {
        height: 450px;
    }
    .mosaic-gallery .tile--4,
    .mosaic-gallery .tile--9 {
        margin-top: -151px;
    }
}
@media(min-width: 1155px) {
    .mosaic-gallery .tile--2,
    .mosaic-gallery .tile--3{
        max-height: 300px;
    }
    .mosaic-gallery .tile--5 {
        margin-top: -50px;
        max-height: 349px;
        height: 100%;
    }
    .mosaic-gallery .tile--6 {
        max-height: 250px;
    }
    .mosaic-gallery .tile--4 {
        height: 350px;
    }
    .mosaic-gallery .tile--4,
    .mosaic-gallery .tile--9 {
        margin-top: 0;
    }
    .mosaic-gallery .tile--7 {
        margin-top: -215px;
    }
    .mosaic-gallery .tile--7,
    .mosaic-gallery .tile--1 {
        height: 450px;
    }
    .mosaic-gallery .tile--8,
    .mosaic-gallery .tile--9 {
        height: 284px;
        margin-top: -50px;
    }
}

.mosaic-gallery .tile--6,
.mosaic-gallery .tile--10 {
}

.mosaic-gallery .wp-block-figcaption {
    position: absolute;
    bottom: 0;
    text-align: left;
    color: var(--wp--preset--color--white);
    font-weight: 700;
    font-size: 1rem;
    margin: var(--wp--preset--spacing--30);
    z-index: 2;
}

.mosaic-gallery .wp-block-image::after,
.mosaic-gallery figure::after {
    content: '';
    background: var(--wp--preset--gradient--vertical-black-0-to-80);
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

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

/* responsive */
@media (max-width: 1154px) {
    .mosaic-gallery{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-template-areas:
        "a b"
        "c d"
        "e e"
        "f g"
        "h i"
        "j j";
    }
}

@media (max-width: 600px) {
    .mosaic-gallery{
        grid-template-columns:1fr;
        grid-template-areas:
        "a" "b" "c" "d" "e" "f" "g" "h" "i" "j";
    }
}

.gallery-image-button {
    border: none;
    padding: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: block;
    position: relative;
    background: transparent;
    &::after {
        content: '\2b';
        font-family: 'Font Awesome 6 Pro';
        font-weight: 300;
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: #978059;
        color: var(--wp--preset--color--white);
        border: none;
        border-radius: 100%;
        width: 40px;
        height: 40px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.gallery-image-button img {
    cursor: pointer;
}

.gallery-image-button:is(:hover, :focus)::after {
    background: var(--wp--preset--color--fcr-gold);
}

.gallery-image-modal__caption {
    margin-top: var(--wp--preset--spacing--20);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--wp--preset--color--black);
}
.gallery-image-modal__content {
    position: relative;
}
.gallery-image-modal__caption {
    position: absolute;
    bottom: var(--wp--preset--spacing--30);
    left: var(--wp--preset--spacing--30);
    color: var(--wp--preset--color--white);
    font-weight: 700;
    z-index: 2;
}
.gallery-image-modal__content::after {
    content: '';
    background: var(--wp--preset--gradient--vertical-black-0-to-80);
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}