1
2  <div class="o-grid">
3    <div class="o-grid__cell u-6of12">Grid cell</div>
4    <div class="o-grid__cell u-6of12">Grid cell</div>
5  </div>
6

1
2  <div class="o-grid">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
4    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
5  </div>
6

1
2  <div class="o-grid o-grid--middle">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
4    <div class="o-grid__cell u-12of12 u-6of12-tablet">
5    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
6    </div>
7  </div>
8

1
2  <div class="o-grid o-grid--bottom">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
4    <div class="o-grid__cell u-12of12 u-6of12-tablet">
5    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
6    </div>
7  </div>
8

1
2  <div class="o-grid o-grid--center">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">
4    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
5    </div>
6  </div>
7

1
2  <div class="o-grid o-grid--right">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">
4    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
5    </div>
6  </div>
7

1
2  <div class="o-section o-media-bg u-80vh">
3    <h1>Sample content</h1>
4    <p>Lorem Ipsum</p>
5    <img class="o-media-bg__media" src="http://placehold.it/500x500" alt="Background image">
6  </div>
7

1
2  <div class="o-section o-media-bg u-80vh">
3    <h1>Sample content</h1>
4    <p>Lorem Ipsum</p>
5    <video class="o-media-bg__media" src="https://storage.googleapis.com/coverr-main/mp4/La-Costa.mp4" loop muted autoplay>
6  </div>
7

1
2  <div class="o-section o-media-bg">
3    <div class="o-media-bg__overlay">
4      <h1>Sample content</h1>
5      <p>Lorem Ipsum</p>
6    </div>
7    <img class="o-media-bg__media" src="http://placehold.it/500x500" alt="Background image">
8  </div>
9

1
2  <div class="o-wrapper">
3    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.</p>
4  </div>
5