.container,
.container-fluid {
    width: 100%;
    margin: auto;
    padding-right: var(--spacing);
    padding-left: var(--spacing);

    .first {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }
    
    .last {
        -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
        order: 12;
    }
}

.container {
    @if map-get($breakpoints, 'sm') {
        @media (min-width: map-get($breakpoints, 'sm')) {
            max-width: map-get($viewports, 'sm');
            padding-right: 0;
            padding-left: 0;
        }
    }

    @if map-get($breakpoints, 'md') {
        @media (min-width: map-get($breakpoints, 'md')) {
            max-width: map-get($viewports, 'md');
            padding-right: 0;
            padding-left: 0;
        }
    }

    @if map-get($breakpoints, 'lg') {
        @media (min-width: map-get($breakpoints, 'lg')) {
            max-width: map-get($viewports, 'lg');
            padding-right: 0;
            padding-left: 0;
        }
    }
}