.i9bp-grid {
    --i9bp-columns: 5;
    --i9bp-gap: 30px;
    display: grid;
    grid-template-columns: repeat(var(--i9bp-columns), minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--i9bp-gap);
    width: 100%;
}

.i9bp-tile {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 15px;
}

.i9bp-ratio-1-1 {
    grid-column: span 1;
    grid-row: span 1;
}

.i9bp-ratio-1-2 {
    grid-column: span 1;
    grid-row: span 2;
}

.i9bp-ratio-2-1 {
    grid-column: span 2;
    grid-row: span 1;
}

.i9bp-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.i9bp-image-colour {
    opacity: 0;
    transform: scale(1.07);
    filter: blur(8px);
    transform-origin: center center;
    will-change: opacity, transform, filter;
    transition:
        opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Per-item simple treatment: no blur/zoom, just a slower two-second crossfade. */
.i9bp-tile.i9bp-no-blur .i9bp-image-colour {
    transform: scale(1);
    filter: none;
    transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .i9bp-tile:hover .i9bp-image-colour {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Touch/mobile: the top edge of each tile triggers the reveal at 30%
   down from the top of the viewport. The slower timing gives the image
   a more deliberate editorial reveal on handheld devices. */
@media (hover: none), (pointer: coarse) {
    .i9bp-image-colour {
        transition:
            opacity 3000ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 3000ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 3000ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Remove Blur matches the standard mobile timing on touch devices. */
    .i9bp-tile.i9bp-no-blur .i9bp-image-colour {
        transition: opacity 3000ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .i9bp-tile.i9bp-revealed .i9bp-image-colour {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@media (max-width: 1199px) {
    .i9bp-grid { --i9bp-columns: 4; }
}

@media (max-width: 899px) {
    .i9bp-grid { --i9bp-columns: 3; }
}

@media (max-width: 679px) {
    .i9bp-grid { --i9bp-columns: 2; }
}

@media (max-width: 479px) {
    .i9bp-grid {
        --i9bp-columns: 1;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .i9bp-tile {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .i9bp-ratio-1-1 { aspect-ratio: 1 / 1; }
    .i9bp-ratio-1-2 { aspect-ratio: 1 / 2; }
    .i9bp-ratio-2-1 { aspect-ratio: 2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
    .i9bp-image-colour {
        transition: none;
        transform: scale(1);
        filter: none;
    }
}