Pipeline Show mosaic layout on mobile

gistfile1.txt

@media only screen and (max-width: 767px) {
    .grid--mosaic {
        display: grid;
        --short-height: calc(200px);
        --tall-height: calc(var(--short-height)* 2 + var(--inner));
    }
    .grid--mosaic-3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: calc(var(--gutter) / 2);
        grid-row-gap: calc(var(--gutter) / 2);
    }
    .grid--tall {
        --column-width: 33.33%;
    }
    .grid--short {
        --column-width: 33.33%;
    }
    .grid--split-left {
        grid-template-columns: var(--column-width) 1fr;
    }
    .grid--short .grid__item--short + .grid__item--short {
        grid-row: 2/3;
    }
    .heading-size-10 {
        font-size: calc(var(--font-6)* var(--FONT-ADJUST-HEADING));
    }
    .grid--mosaic .grid__item {
        margin-bottom: 0;
    }  
    .grid__item--short {
        min-height: var(--short-height);
    }
}