.g1-mosaic-3-3v-3v-3v-3v {
    overflow: hidden;

    &:after {
        display: table;
        clear: both;
        content: "";
    }

    .g1-mosaic-item {
        width: 100%;
        height: 230px;
    }
}

@media only screen and ( min-width: 601px ) {
    .g1-mosaic-3-3v-3v-3v-3v {
        .g1-mosaic-item {
            float: $left;
            width: percentage(1/2);
            height: 230px;
        }

        .g1-mosaic-item-1 {
            height: 460px;
            width: 100%;
        }
    }
}


@media only screen and ( min-width: 801px ) {
    .g1-mosaic-3-3v-3v-3v-3v {
        height: 460px;

        .g1-mosaic-item {
            width: percentage(1/3);
            height: 50%;
        }

        .g1-mosaic-item-1 {
            height: 100%;
        }
    }
}