/* MOSAIC IMAGES */
.s-micro-mosaic-image-cont {
    &.img-count-4 {
        --p1-col-pos: 1 / 3;
        --p1-row-pos: 1 / 3;
        --p2-col-pos: 3 / 5;
        --p2-row-pos: 1;
        --p3-col-pos: 3 / 4;
        --p3-row-pos: 2;
        --p4-col-pos: 4 / 5;
        --p4-row-pos: 2;
        --mosaic-grid-cols: repeat(4, 1fr);
        --mosaic-grid-rows: minmax(200px, 250px);
    
        @media (max-width:991px) {
            --p1-col-pos: 1 / 3;
            --p1-row-pos: 1 / 3;
            --p2-col-pos: 3 / 5;
            --p2-row-pos: 1 / 3;
            --p3-col-pos: 1 / 3;
            --p3-row-pos: 3 / 5;
            --p4-col-pos: 3 / 5;
            --p4-row-pos: 3 / 5;
            --mosaic-grid-rows: auto;
        }
    
        @media (max-width: 575px) {
            --p1-col-pos: 1 / 5;
            --p1-row-pos: 1 / 4;
            --p2-col-pos: 1 / 5;
            --p2-row-pos: 4;
            --p3-col-pos: 1 / 3;
            --p3-row-pos: 5;
            --p4-col-pos: 3 / 5;
            --p4-row-pos: 5;
            --mosaic-grid-rows: minmax(100px, 180px);
        }
    }

    &.img-count-3 {
        --p1-col-pos: 1;
        --p1-row-pos: 1 / 3;
        --p2-col-pos: 2;
        --p2-row-pos: 1;
        --p3-col-pos: 2;
        --p3-row-pos: 2;
        --mosaic-grid-cols: repeat(2, 1fr);
        --mosaic-grid-rows: minmax(200px, auto);

        @media (max-width: 575px) {
            --p1-col-pos: 1 / 3;
            --p1-row-pos: 1;
            --p2-col-pos: 1;
            --p2-row-pos: 2;
            --p3-col-pos: 2;
            --p3-row-pos: 2;
        }
    }

    &.img-count-2 {
        --p1-col-pos: 1 / 2;
        --p1-row-pos: 1;
        --p2-col-pos: 2 / 3;
        --p2-row-pos: 1;
        --mosaic-grid-cols: 2;
        --mosaic-grid-rows: auto;

        @media (max-width: 575px) {
            --p1-col-pos: 1;
            --p1-row-pos: 1;
            --p2-col-pos: 1;
            --p2-row-pos: 2;
            --mosaic-grid-cols:1
        }
    }

    &.img-count-1 {
        --p1-col-pos: 1;
        --p1-row-pos: 1;
        --mosaic-grid-cols: 1;
        --mosaic-grid-rows: 1;
    }

    display: grid;
    grid-template-columns: var(--mosaic-grid-cols);
    grid-auto-rows: var(--mosaic-grid-rows);
    gap: 5px;
    width: 100%;
    padding: 20px 0;

    .s-micro-mosaic-image {
        overflow: hidden;
        
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.position-1 {
            grid-column: var(--p1-col-pos);
            grid-row: var(--p1-row-pos); 
        }

        &.position-2 {
            grid-column: var(--p2-col-pos);
            grid-row: var(--p2-row-pos);
        }

        &.position-3 {
            grid-column: var(--p3-col-pos);
            grid-row: var(--p3-row-pos);
        }

        &.position-4 {
            grid-column: var(--p4-col-pos);
            grid-row: var(--p4-row-pos);
        }
    }
}