@use '../abstracts' as *;

.container {
    &--grid {
        @include container-grid();
    }

    &--fluid {
        @include fluid-container-grid();
    }

    &--inner {
        @include inner-grid();
    }

    &__content {

        &--content,
        &--main,
        &--narrow,
        &--wide {
            --_column-offset: 0;
            --content-offset: calc(var(--grid-gutter-width) + var(--grid-column-gap) + (var(--grid-column-width) * var(--_column-offset)));
        }

        &--content {
            grid-column: main;

            @include breakpoint(xl) {
                --_column-offset: 1;
                grid-column: 3 / 13;
            }
        }

        &--main {
            grid-column: main;
        }

        &--narrow {
            grid-column: main;

            @include breakpoint(xl) {
                --_column-offset: 2;
                grid-column: 4 / 12;
            }
        }

        &--wide {
            grid-column: wide;
        }

        &--queried {
            container: content / inline-size;
        }
    }
}