/*
  Allows for full-width banners and sections on Pegasus pages.

  Should be used on pages that:
  - have a full-width hero banner
  - use a background color to delineate between sections

  This differs from the .container_responsive class on brstrap.css
  by making the container the full-width of the screen at any size.

  The container_responsive class uses a defined width that forces margins
  on each side which makes a full-width design impossible.

  The "wrapper" class on a section element now acts as the container,
  allowing each section to be full-width.
*/

.container_responsive_full_width {
  width: 100%;
  padding: 0;
}

/* Use semantic <section> elements instead of <div>s */
/* This is better for accessibility */
section {
  width: 100%;
  padding: 4rem 2rem;
}

/* Use class="wrapper" to house a section's content */
/* Content will be centered on the page while allowing
  for a full-width background color or image */
section .wrapper {
  max-width: 960px;
  margin: 0 auto;
}