metro4/source/components/image-grid/image-grid.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.image-grid {
    display: flex;
    flex-flow: row wrap;
}

.image-grid__item {
    display: block;
    overflow: hidden;

    &-landscape {
        width: 320px;
        height: 180px;
    }

    &-portrait {
        width: 160px;
        height: 180px;
    }
}

.image-grid__item {
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.image-grid {
    &.half-size {
        .image-grid__item {
            &-landscape {
                width: 160px;
                height: 90px;
            }

            &-portrait {
                width: 80px;
                height: 90px;
            }
        }
    }
}