<script>import { BEM } from "../../models/BEM";
export let flex = false;
export let all = false;
const bm = new BEM('UI-Container', {});
bm.append($$props.class);
</script>

<div class="{bm.toString()}" class:all class:flex>
	<slot/>
</div>

<style>.UI-Container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .UI-Container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .UI-Container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .UI-Container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .UI-Container {
    max-width: 1140px;
  }
}
@media (min-width: 1500px) {
  .UI-Container {
    max-width: 1350px;
  }
}
.UI-Container.flex {
  display: flex;
  flex-wrap: wrap;
}
.UI-Container.all {
  width: 100%;
  max-width: 100%;
}</style>
