@use "../theme.scss" as *;
@use "../container.scss" as *;
@use "../flex-grid.scss";
@use "../typography.scss" as *;
@use "../utils.scss" as *;
@use "../button.scss" as *;
@use "./index.scss";

.demoSpacingContainer {
  background-color: rgb(221, 221, 221);
  border-width: 1px;
  border-color: rgb(185, 185, 185);
  border-style: solid;
  border-radius: 0;
  margin-bottom: 1.3em;
  width: 20em;
  height: 10em;
}

.demoSpacingContainer > * {
  background-color: rgba(58, 45, 79, 0.2);
  border: 1px solid #000;
  box-sizing: border-box;
}

.demoSizingContainer {
  background-color: rgb(221, 221, 221);
  width: 20em;
  height: 10em;
  margin-bottom: 1em;
}

.demoSizingContainer > * {
  background-color: rgba(58, 45, 79, 0.2);
  border: 1px solid #000;
  box-sizing: border-box;
}

.demoSizingVeryWide {
  width: 40em;
}

.demoSizingVeryHigh {
  height: 20em;
}

.demoGutter {
  max-width: 500px;
  margin-bottom: 1em;
  background-color: rgb(221, 221, 221);
}