*, :before, :after {
  box-sizing: border-box;
}

.layout-row {
  @include layout(row);
}

.layout-column {
  @include layout(column);
}

html {
  height: 100vh;
}

body {
  @include layout(column);
  flex-wrap: nowrap;
  font-size: 16px;
  line-height: 1.8rem;
  height: 100vh;
}

.container {
  margin: 0 auto;
  width: 100%;

  @include breakpoint('screen', 'xs') { max-width: 100vw; }
  @include breakpoint('screen', 's') { max-width: 100vw; }
  @include breakpoint('screen', 'm') { max-width: 95vw; }
  @include breakpoint('screen', 'l') { max-width: 90vw; }
  @include breakpoint('screen', 'xl') { max-width: rem(1400); }
  @include breakpoint('screen', 'xxl') { max-width: rem(1600); }
}
