/*
==========================================================================
    Component: Tiered Image Gallery
==========================================================================
*/

/* -- Tiered Image Gallery --*/
.tiered-gallery-wrapper {
    display: flex;
    flex-direction: column;
}

.tier {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.tier-image {
    margin: 0;
    padding: 0;
}

.tier-1 .tier-image {
    width: 100%;
}

.tier-2 .tier-image {
    width: 50%;
}

.tier-3 .tier-image {
    width: 100%;
}

.tier-4 .tier-image {
    width: 33.3333%;
}

.tier img {
    display: block;
    width: 100%;
    height: auto;
}

/* Assuming .bg-grey-100 sets a background colour, replicate it directly */
.tier-2 .tier-image:nth-child(n+3),
.tier-3 .tier-image,
.tier-4 .tier-image:nth-child(-n+3) {
    background-color: #eeeeee;
}