@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.container, .container-fluid, section, header, footer, aside {
    margin: 0 auto;
    position: relative;
    .clear();
}

.container {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    container: container / inline-size;
}

.container-fluid {
    width: 100%;
    max-width: none;
    padding-right: 12px;
    padding-left: 12px;
}

@media (min-width: 360px) and (max-width: 576px) {
    .container {
        max-width: 98%;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .container {
        max-width: 95%;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .container {
        max-width: 90%;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .container {
        max-width: 90%;
    }
}

@media (min-width: 1201px) {
    .container {
        max-width: 80%;
    }
}

each(@media-rules, {
    .container-@{key} {
        max-width: @value;
    }
})

.container-max {
    width: 100%;
}

.container-query, .responsive-container {
    container-name: container-query;
    container-type: inline-size;
}