<div class="overlay">
  <div class="container">
    <div class="row">
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
      <div class="col-1"><span></span></div>
    </div>
  </div>
</div>

<main class="content">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8">
        <h1 class="headline headline--h2">The Grid</h1>
        <p>There are 12 Columns which gaps amount to 20px</p>
      </div>

      <div class="col-12 col-md-6">
        <h3>Breakpoints</h3>
        <ul>
          <li><strong>XS:</strong> 0 - 576px</li>
          <li><strong>SM:</strong> 576px - 768px</li>
          <li><strong>MD:</strong> 768px - 992px</li>
          <li><strong>LG:</strong> 992px - 1200px</li>
          <li><strong>XL:</strong> 1200px - 1400px</li>
          <li><strong>XXL:</strong> > 1400px</li>
        </ul>
      </div>

      <div class="col-12 col-md-6">
        <h3>Container Max-Widths</h3>
        <ul>
          <li><strong>XS:</strong> 100% - 40px</li>
          <li><strong>SM:</strong> 540px</li>
          <li><strong>MD:</strong> 720px</li>
          <li><strong>LG:</strong> 960px</li>
          <li><strong>XL:</strong> 1140px</li>
          <li><strong>XXL:</strong> 1320px</li>
        </ul>
      </div>
    </div>
  </div>
</main>

{{ page.inlinestyles }}