<div class="o-flex-line o-flex-line--[modifier class]">
  <div>
    <p class="mini">Eins</p>
  </div>
  <div>
    <p class="mini">Zwei</p>
  </div>
  <div>
    <p class="mini">Drei</p>
  </div>
</div>

<div class="o-flag o-flag--[modifier class]">
  <div class="o-flag__media"><img src="https://picsum.photos/300/150" alt="Alternate text"/></div>
  <div class="o-flag__body">
    <h1>Flag</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
  </div>
</div>

<ul class="o-list-bare">
  <li>This is a list item in an unordered list</li>
  <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
  <li>This is the last list item</li>
</ul>

<ul class="o-list-inline">
  <li class="o-list-inline__item">One</li>
  <li class="o-list-inline__item">Two</li>
  <li class="o-list-inline__item">Three</li>
  <li class="o-list-inline__item">Four</li>
</ul>

<div class="o-container [modifier class]">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
  <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
</div>

<div class="o-container">
  <main class="o-container__content">
    <div class="frame-space-after-large" id="c1000">
      <h2>Grid 1 column</h2>
      <div class="o-grid">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c2000">
      <h2>Grid 1 column fullwidth</h2>
      <div class="o-grid">
        <div class="o-outbreak-fullwidth" style="background-color: #ED7366">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c2500">
      <h2>Grid 1 column outdent inverted</h2>
      <div class="o-grid">
        <div class="o-outbreak-inverted" style="background-color: #ED7366">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c3000">
      <h2>Grid 2 column</h2>
      <div class="o-grid o-grid-1-1@tablet">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c4000">
      <h2>Grid 2 column with horizontal indent (left & right)</h2>
      <div class="o-grid o-grid-1-1@tablet">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c5000">
      <h2>Grid 1/2 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c6000">
      <h2>Grid 1/2 column outdent left</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
        <div class="o-outbreak-left" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c7000">
      <h2>Grid 1/2 column outdent right</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div class="o-outbreak-right" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c8000">
      <h2>Grid 2/1 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c9000">
      <h2>Grid 2/1 column outdent left</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
        <div class="o-outbreak-left" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c10000">
      <h2>Grid 2/1 column outdent right</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div class="o-outbreak-right" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c11000">
      <h2>Grid 3 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-1-1@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c12000">
      <h2>Grid 4 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-1-1-1@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c13000">
      <h2>Grid 3-7 column</h2>
      <div class="o-grid o-grid-3-7@tablet">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
  </main>
</div>

<div class="o-grid">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid">
  <div class="o-outbreak-fullwidth" style="background-color: #ED7366">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit</div>
</div>

<div class="o-grid o-grid-1-1@tablet">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-1-1-1@desktop">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-1-1-1-1@desktop">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
  <div class="o-outbreak-left" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div class="o-outbreak-right" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
  <div class="o-outbreak-left" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
  <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
  <div class="o-outbreak-right" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
</div>

<div style="display: flex; justify-content: center; background-color: var(--oth-color-gull-gray)">
  <div class="[modifier class]" style="background-color: var(--oth-color-geyser)">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  </div>
</div>