/* Maple Site Kit: image-gallery block styles. GENERATED by scripts/build-block-css-map.php from blocks/image-gallery/style.css. */
.msk-image-gallery {
    display: grid;
    grid-template-columns: repeat( var( --msk-gallery-cols, 3 ), 1fr );
    gap: clamp( 0.75rem, 2vw, 1.5rem );
}

.msk-image-gallery__tile {
    overflow: hidden;
    border-radius: var( --msk-radius-md, 0.75rem );
}

.msk-image-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    
    transition: transform var( --msk-duration-slow, 0.4s ) var( --msk-ease-out, ease-out );
}

.msk-image-gallery__tile:hover .msk-image-gallery__img {
    transform: scale( 1.04 );
}


.msk-image-gallery__placeholder {
    display: block;
    width: 100%;
    background:
        var( --msk-gallery-placeholder-bg, linear-gradient( 150deg, #ede3d3 0%, #e2d3bd 100% ) );
}


@media ( max-width: 900px ) {
    .msk-image-gallery {
        grid-template-columns: repeat( min( var( --msk-gallery-cols, 3 ), 2 ), 1fr );
    }
}

@media ( max-width: 560px ) {
    .msk-image-gallery {
        grid-template-columns: 1fr;
    }
}

@media ( prefers-reduced-motion: reduce ) {
    .msk-image-gallery__img {
        transition: none;
    }

    .msk-image-gallery__tile:hover .msk-image-gallery__img {
        transform: none;
    }
}


.msk-image-gallery__picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}