%container-base {
    width: 100%;
    margin: 0 auto;
    padding-inline: 15px;

    @include breakpoint(lg) {
        padding-inline: 30px;
    }
}

%container {
    @extend %container-base;

    max-width: $rocket-container-width;
}

%container--sm {
    max-width: $rocket-container-width-sm;
}

%container--xl {
    max-width: $rocket-container-width-xl;
}

%container--xxl {
    max-width: $rocket-container-width-xxl;
}

%container--fluid {
    max-width: $rocket-container-fluid;
    padding: 0;
}

// Default container class
.container {
    $this: &;

    @extend %container;

    &:is(&--sm) {
        @extend %container--sm;
    }

    &:is(&--xl) {
        @extend %container--xl;
    }

    &:is(&--xxl) {
        @extend %container--xxl;
    }

    &:is(&--fluid) {
        @extend %container--fluid;
    }

    .container {
        padding: 0;
        max-width: $rocket-container-width;
    }
}