simedkom/public/assets/homepage/sass/theme-responsive/layouts/_grid.scss

@include respond-to('desktop') {
    .grid {
        &.xxl-grid-6col {
            li { 
                width: 16.67%; 
                &.grid-item-double { 
                    width: 33.33%; 
                }
            }
        }
        &.xxl-grid-5col {
            li { 
                width: 20%; 
                &.grid-item-double { 
                    width: 40%; 
                }
            }
        }
        &.xxl-grid-4col {
            li { 
                width: 25%;
                &.grid-item-double {
                    width: 50%;
                }
            }
        }
        &.xxl-grid-3col {
            li {
                width: 33.33%;
                &.grid-item-double {
                    width: 66.67%;
                }
            }
        }
        &.xxl-grid-2col {
            li {
                width: 50%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
        &.xxl-grid-1col {
            li {
                width: 100%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
    }
}
@include respond-to('mini-desktop') {
    .grid {
        &.xl-grid-6col {
            li { 
                width: 16.67%; 
                &.grid-item-double { 
                    width: 33.33%; 
                }
            }
        }
        &.xl-grid-5col {
            li { 
                width: 20%; 
                &.grid-item-double { 
                    width: 40%; 
                }
            }
        }
        &.xl-grid-4col {
            li { 
                width: 25%;
                &.grid-item-double {
                    width: 50%;
                }
            }
        }
        &.xl-grid-3col {
            li {
                width: 33.33%;
                &.grid-item-double {
                    width: 66.67%;
                }
            }
        }
        &.xl-grid-2col {
            li {
                width: 50%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
        &.xl-grid-1col {
            li {
                width: 100%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
    }
}
@include respond-to('laptop') {
    .grid {
        &.lg-grid-6col {
            li { 
                width: 16.67%; 
                &.grid-item-double { 
                    width: 33.33%; 
                }
            }
        }
        &.lg-grid-5col {
            li { 
                width: 20%; 
                &.grid-item-double { 
                    width: 40%; 
                }
            }
        }
        &.lg-grid-4col {
            li { 
                width: 25%;
                &.grid-item-double {
                    width: 50%;
                }
            }
        }
        &.lg-grid-3col {
            li {
                width: 33.33%;
                &.grid-item-double {
                    width: 66.67%;
                }
            }
        }
        &.lg-grid-2col {
            li {
                width: 50%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
        &.lg-grid-1col {
            li {
                width: 100%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
    }
}
@include respond-to('tablet') {
    .grid {
        &.md-grid-6col {
            li { 
                width: 16.67%; 
                &.grid-item-double { 
                    width: 33.33%; 
                }
            }
        }
        &.md-grid-5col {
            li { 
                width: 20%; 
                &.grid-item-double { 
                    width: 40%; 
                }
            }
        }
        &.md-grid-4col {
            li { 
                width: 25%;
                &.grid-item-double {
                    width: 50%;
                }
            }
        }
        &.md-grid-3col {
            li {
                width: 33.33%;
                &.grid-item-double {
                    width: 66.67%;
                }
            }
        }
        &.md-grid-2col {
            li {
                width: 50%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
        &.md-grid-1col {
            li {
                width: 100%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
    }
}
@include respond-to('phone-landscape') {
    .grid {
        &.sm-grid-6col {
            li { 
                width: 16.67%; 
                &.grid-item-double { 
                    width: 33.33%; 
                }
            }
        }
        &.sm-grid-5col {
            li { 
                width: 20%; 
                &.grid-item-double { 
                    width: 40%; 
                }
            }
        }
        &.sm-grid-4col {
            li { 
                width: 25%;
                &.grid-item-double {
                    width: 50%;
                }
            }
        }
        &.sm-grid-3col {
            li {
                width: 33.33%;
                &.grid-item-double {
                    width: 66.67%;
                }
            }
        }
        &.sm-grid-2col {
            li {
                width: 50%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
        &.sm-grid-1col {
            li {
                width: 100%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
    }
    .grid {
        &.gutter-small {
            margin: 0 -7px;
        }
        &.gutter-small {
            li {
                padding:7px 7px;
            }
        }
        &.gutter-extra-large {
            li {
                padding:15px;
            }
        }
        &.gutter-extra-large {
            margin:0 -15px; 
        }
        &.gutter-double-extra-large {
            li {
                padding: 15px;
            }
        }
        &.gutter-medium {
            margin: 0 -7px;
        }
        &.gutter-medium {
            li {
                padding: 7px 7px;
            }
        }
        &.gutter-large {
            margin: 0 -10px;
        }
        &.gutter-large {
            li {
                padding: 10px 10px;
            }
        }
    }
}
@include respond-to('phone-portrait') {
    .grid {
        &.xs-grid-6col {
            li { 
                width: 16.67%; 
                &.grid-item-double { 
                    width: 33.33%; 
                }
            }
        }
        &.xs-grid-5col {
            li { 
                width: 20%; 
                &.grid-item-double { 
                    width: 40%; 
                }
            }
        }
        &.xs-grid-4col {
            li { 
                width: 25%;
                &.grid-item-double {
                    width: 50%;
                }
            }
        }
        &.xs-grid-3col {
            li {
                width: 33.33%;
                &.grid-item-double {
                    width: 66.67%;
                }
            }
        }
        &.xs-grid-2col {
            li {
                width: 50%;
                &.grid-item-double {
                    width: 100%;
                }
            }
        }
        &.xs-grid-1col {
            li {
                width: 100%;
            }
        }
    }
}