WeAreGenki/minna-ui

/**
 * CONTAINER
 *
 * Wrap content to maintain whitespace from screen edges and limit width.
 *
 * NOTE:
 *   Width is fluid until `max-width` so this only impacts large screens such as
 *   desktops or TVs.
 *
 * @format
 */

.con {
  box-sizing: border-box;
  max-width: $container-width-max;
  margin-right: auto;
  margin-left: auto;
  padding-right: $gutter-col;
  padding-left: $gutter-col;

  @media $l {
    padding-right: calc($gutter-col * 2);
    padding-left: calc($gutter-col * 2);
  }
}

.fluid {
  max-width: unset;
}

.narrow {
  max-width: $container-narrow-width-max;
}