sass mixin to container (responsive)

container.scss

.container {
    position: relative;
    margin: 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
    width: 100%;

    @include mq(sm) {
        max-width: $col-sm;
    }

    @include mq(md) {
        max-width: $col-md;
    }

    @include mq(lg) {
        max-width: $col-lg;
    }

    @include mq(xl) {
        max-width: $col-xl;
    }
}

mixins.scss

@mixin mq($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
      @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
        @content;
      }
    }
}

vars.scss

//- global media vars

$def:          320px;

$xs: 23.5em;    // 376px @media (max-width: $xs) {}

$sm:            36em;      // (min-width: 576px)
$md:            48em;      // (min-width: 768px)
$lg:            62em;      // (min-width: 992px)
$gl:            64em;      //! gap `lg - xl` (min-width: 1024px)
$xl:            75em;      // (min-width: 1200px)

//- to container

$col-sm:        540px;  // (max-width: 540px)
$col-md:        720px;  // (max-width: 720px)
$col-lg:        960px;  // (max-width: 960px)
$col-xl:        1140px; // (max-width: 1140px)

$breakpoints: (
    sm: $sm,
    md: $md,
    lg: $lg,
    xl: $xl
);