@use "sass:map";

@use "/resources/styles/config";
@use "/resources/styles/common" as *;

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: #{map.get(config.$breakpoints, sm, gap)};
    padding-right: #{map.get(config.$breakpoints, sm, gap)};

    @include at(md) {
        max-width: #{map.get(config.$breakpoints, lg, width)};
        padding-left: #{map.get(config.$breakpoints, md, gap)};
        padding-right: #{map.get(config.$breakpoints, md, gap)};
    }

    @include at(lg) {
        max-width: #{map.get(config.$breakpoints, xl, width)};
        padding-left: #{map.get(config.$breakpoints, lg, gap)};
        padding-right: #{map.get(config.$breakpoints, lg, gap)};
    }
}