.container {
    width: 100%;

    margin: calc(var(--gutter-width)*2) auto;

    &:first-child {
        margin-top: 0;
    }
    &:last-child {
        margin-bottom: 0;
    }

    max-width: 100%;
    @media(min-width: 576px) {
        max-width: 540px
    }
    @media(min-width: 768px) {
        max-width: 720px;
    }
    @media(min-width: 992px) {
        max-width: 960px;
    }
    @media(min-width: 1200px) {
        max-width: 1140px;
    }
    @media(min-width: 1400px) {
        max-width: 1320px;
    }
    @media(min-width: 2560px) {
        max-width: 1500px;
    }

    &.container--s {
        max-width: 100%;
        @media(min-width: 576px) {
            max-width: 540px
        }
        @media(min-width: 768px) {
            max-width: 720px;
        }
        @media(min-width: 992px) {
            max-width: 960px;
        }
        @media(min-width: 1200px) {
            max-width: 1140px;
        }
        @media(min-width: 1400px) {
            max-width: 1320px;
        }
        @media(min-width: 2560px) {
            max-width: 1500px;
        }
    }
    &.container--m {
        max-width: 100%;
        @media(min-width: 768px) {
            max-width: 720px;
        }
        @media(min-width: 992px) {
            max-width: 960px;
        }
        @media(min-width: 1200px) {
            max-width: 1140px;
        }
        @media(min-width: 1400px) {
            max-width: 1320px;
        }
        @media(min-width: 2560px) {
            max-width: 1500px;
        }
    }
    &.container--l {
        max-width: 100%;
        @media(min-width: 992px) {
            max-width: 960px;
        }
        @media(min-width: 1200px) {
            max-width: 1140px;
        }
        @media(min-width: 1400px) {
            max-width: 1320px;
        }
        @media(min-width: 2560px) {
            max-width: 1500px;
        }
    }
    &.container--xl {
        max-width: 100%;
        @media(min-width: 1200px) {
            max-width: 1140px;
        }
        @media(min-width: 1400px) {
            max-width: 1320px;
        }
        @media(min-width: 2560px) {
            max-width: 1500px;
        }
    }
    &.container--xxl {
        max-width: 100%;
        @media(min-width: 1400px) {
            max-width: 1320px;
        }
        @media(min-width: 2560px) {
            max-width: 1500px;
        }
    }
    &.container--4k {
        @media(min-width: 2560px) {
            max-width: 1500px;
        }
    }
    &.container--fluid {
        max-width: 100%;
    }
}