/* @group Images Grid
------------------------------------ */

.images-grid .bp-column {
    display: flex;
    row-gap: .5rem;
    column-gap: 2rem;
    flex-wrap: wrap;
}
.images-grid .bp-column :is(.bp-multimedia, p) {
    flex: 0 1 100%;
}
.images-grid .bp-column:is(.one) .bp-multimedia {
    height: 25.8rem;
}
.images-grid .bp-column:is(.two) .bp-multimedia {
    height: 17rem;
}
.images-grid .bp-column:is(.three, .four) .bp-multimedia {
    height: 25.8rem;
}

@media only screen
and (min-width : 961px) {
    .images-grid .bp-column:is(.one) {
        padding-top: 13rem;
    }
    .images-grid .bp-column:is(.one) .bp-multimedia {
        height: 67.9rem;
    }
    .images-grid .bp-column:is(.two) .bp-multimedia {
        height: 41.4rem;
    }
    .images-grid .bp-column:is(.three) {
        padding-top: 19rem;
    }
    .images-grid .bp-column:is(.three) .bp-multimedia:first-of-type {
        height: 51.2rem;
        flex: 0 1 calc(66% - 1rem);
        max-width: calc(66% - 1rem);
    }
    .images-grid .bp-column:is(.three) .bp-multimedia:last-of-type {
        height: 28.1rem;
        flex: 0 1 calc(33% - 1rem);
        max-width: calc(33% - 1rem);
    }
    .images-grid .bp-column:is(.four) {
        margin-top: -16rem;
    }
    .images-grid .bp-column:is(.four) .bp-multimedia {
        height: 63.3rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .images-grid > :is(.row, #important) {
        flex-direction: row;
        justify-content: space-between;
    }
    .images-grid .bp-column:is(.one, .three, .four, #important) {
        flex: 0 1 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
    .images-grid .bp-column:is(.two, #important) {
        flex: 0 1 calc(33% - 1rem);
        max-width: calc(33% - 1rem);
    }
    .images-grid .bp-column:is(.one, #important) {
        padding-top: 6rem;
    }
    .images-grid .bp-column:is(.four, #important) {
        margin-top: -7rem;
    }
    .images-grid .bp-column:is(.three, #important) {
        padding-top: 17rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .images-grid .bp-column {
	opacity: 0;
	--duration: 1s;
}
:where(#wrapper) .images-grid .bp-column.animateActive {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
    --delay: 0.3s;
}