.container {
    width: $screen-lg-width - $gutter;
    @extend .mar-auto-x;
}

.container-xl {
    width: $screen-xl-width - $gutter;
    @extend .mar-auto-x;
}

.gr-row, .full-grids-xl, .half-grids-xl, .quarter-grids-xl, .quad-grids-xl, .shared-grids-xl, .full-grids-lg, .half-grids-lg, .quarter-grids-lg, .quad-grids-lg, .shared-grids-lg, .full-grids-md, .half-grids-md, .quarter-grids-md, .quad-grids-md, .shared-grids-md, .full-grids-sm, .half-grids-sm, .quarter-grids-sm, .quad-grids-sm, .shared-grids-sm, .full-grids-xs, .half-grids-xs, .quarter-grids-xs, .quad-grids-xs, .shared-grids-xs {
    @extend .block-items;
    @extend .block-item;
    margin-left: -#{$gap-px};
    > * {
        @extend .pad-#{$gap-val}-l;
    }
    &.height-prefix {
        > * > * {
            height: 100%;
        }
    }
}

.gr {
    flex: 1 0 0;
}

@media only screen and (min-width: 1px) {
    .full-grids-xs {
        display: flex;
        > * {
            flex: 0 0 100%;
        }
    }
    .half-grids-xs {
        display: flex;
        > * {
            flex: 0 0 50%;
        }
    }
    .quarter-grids-xs {
        display: flex;
        > * {
            flex: 0 0 33.33%;
        }
    }
    .quad-grids-xs {
        display: flex;
        > * {
            flex: 0 0 25%;
        }
    }
    .shared-grids-xs {
        display: flex;
        > * {
            flex: 1 0 0;
        }
    }
}

@media only screen and (min-width: $screen-sm-width) {
    .full-grids-sm {
        display: flex;
        > * {
            flex: 0 0 100%;
        }
    }
    .half-grids-sm {
        display: flex;
        > * {
            flex: 0 0 50%;
        }
    }
    .quarter-grids-sm {
        display: flex;
        > * {
            flex: 0 0 33.33%;
        }
    }
    .quad-grids-sm {
        display: flex;
        > * {
            flex: 0 0 25%;
        }
    }
    .shared-grids-sm {
        display: flex;
        > * {
            flex: 1 0 0;
        }
    }
}

@media only screen and (min-width: $screen-md-width) {
    .full-grids-md {
        display: flex;
        > * {
            flex: 0 0 100%;
        }
    }
    .half-grids-md {
        display: flex;
        > * {
            flex: 0 0 50%;
        }
    }
    .quarter-grids-md {
        display: flex;
        > * {
            flex: 0 0 33.33%;
        }
    }
    .quad-grids-md {
        display: flex;
        > * {
            flex: 0 0 25%;
        }
    }
    .shared-grids-md {
        display: flex;
        > * {
            flex: 1 0 0;
        }
    }
}

@media only screen and (min-width: $screen-lg-width) {
    .full-grids-lg {
        display: flex;
        > * {
            flex: 0 0 100%;
        }
    }
    .half-grids-lg {
        display: flex;
        > * {
            flex: 0 0 50%;
        }
    }
    .quarter-grids-lg {
        display: flex;
        > * {
            flex: 0 0 33.33%;
        }
    }
    .quad-grids-lg {
        display: flex;
        > * {
            flex: 0 0 25%;
        }
    }
    .shared-grids-lg {
        display: flex;
        > * {
            flex: 1 0 0;
        }
    }
}

@media only screen and (min-width: $screen-xl-width) {
    .full-grids-xl {
        display: flex;
        > * {
            flex: 0 0 100%;
        }
    }
    .half-grids-xl {
        display: flex;
        > * {
            flex: 0 0 50%;
        }
    }
    .quarter-grids-xl {
        display: flex;
        > * {
            flex: 0 0 33.33%;
        }
    }
    .quad-grids-xl {
        display: flex;
        > * {
            flex: 0 0 25%;
        }
    }
    .shared-grids-xl {
        display: flex;
        > * {
            flex: 1 0 0;
        }
    }
}

@media only screen and (max-width: $screen-xl-width) {
    .container-xl {
        width: 100%;
        padding-left: #{($gap-val * 2) + "px"};
        padding-right: #{($gap-val * 2) + "px"};
    }
}

@media only screen and (max-width: $screen-lg-width) {
    .container, .container-xl {
        width: 100%;
        padding-left: #{$gap-val + "px"};
        padding-right: #{$gap-val + "px"};
    }
    .mob-items-md {
        display: block;
        &.start {
            > * {
                text-align: left;
            }
        }
        &.end {
            > * {
                text-align: right;
            }
        }
        > * {
            text-align: center;
            display: block;
            width: 100%;
            margin-bottom: $gap-px;
        }
    }
}

@media only screen and (max-width: $screen-md-width) {
    .mob-items-sm {
        display: block;
        &.start {
            > * {
                text-align: left;
            }
        }
        &.end {
            > * {
                text-align: right;
            }
        }
        > * {
            text-align: center;
            display: block;
            width: 100%;
            margin-bottom: $gap-px;
        }
    }
}

@media only screen and (max-width: $screen-sm-width) {
    .mob-items-xs {
        display: block;
        &.start {
            > * {
                text-align: left;
            }
        }
        &.end {
            > * {
                text-align: right;
            }
        }
        > * {
            text-align: center;
            display: block;
            width: 100%;
            margin-bottom: $gap-px;
        }
    }
}