@use "../abstracts/breakpoints" as bp;
$breakpoints: bp.$breakpoints;

.container,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
    padding-block: var(--container-padding-y);
}

.container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
    padding-block: var(--container-padding-y);
}

.container {
    max-width: var(--container-max-width);
}

@each $key, $value in $breakpoints {
    .container-#{$key} {
        max-width: $value;
    }
}