// vf-body

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

/* The Body
 * -------------- // --------------
 *
 * All content except for a few design patterns are tied into a layout with a maximum
 * width of 1300px. We center the `body` element to create a simple 3 column
 * layout with the central grid set to a maximum of 80em (1300px).
 *
 */

html {
  margin: 0;
}

.vf-body {
  display: block;
  margin: 0 auto;
  max-width: 80em;
  max-width: var(--vf-body-width, #{$vf-layout--comfortable});
  padding: 0 1em;

  // there are times where developers add a `vf-body` inside a `vf-body` this line
  // of code will fix that if needed.
  & + & {
    padding: 0;
  }
}