Skip to main content

Mosaic

Mosaic showcases components as a graphic montage. It always extends the full content area.

Example

Accessories

The perfect complements to your Surface

Surface cases
Surface accessories
Surface pens
Surface keyboards
Surface mice
Mosaic for Surface containing images and a mosaic placement using the dark theme

Best practices

Use mosaic by itself or in combination with hero at the top of primary landing pages. It can also be used by itself further down the page. Mosaic is well-suited for a video and slideshow montage. Use mosaic to showcase lots of rich content items that are personalized to the user. Mosaics also lend themselves well to storytelling scenarios with lots of rich imagery and other content, (e.g. product detail or family pages). Single-height mosaics can be placed below single hero or single hero carousels at the top of a page. Mosaics may be stacked with heroes lower on the page, keeping in mind page pacing and rhythm.

Do

  • Use mosaic to support a theme, communicate an idea, or present top picks around a particular topic. Users should be able to perceive the overall message of a mosaic without having to study all the individual segments.
  • Consider hierarchy, rhythm, and pattern when choosing imagery for mosaic placements, and when placing a mosaic on the page. The flow of the page can be broken gracefully through a mindful use of the right mosaic pattern.
  • Consider the same photo guidelines for mosaics as for hero images. In cases where text is placed on image, careful attention must be paid to clear spaces and contrast levels. For more information, see our photo guidelines.

Don’t

  • Don’t try to put a mosaic on every page. It is a signature component that should be used according to specific cases described above to avoid oversaturation.
  • Avoid placing full photo placements right next to each other within a mosaic. This intersection creates visual noise. Instead, break up rich imagery with color blocks or device renders with neutral backgrounds.
  • Don’t put too much text over mosaic placements — it detracts from the impact of the imagery and message, which should both speak for themselves and speak clearly as a part of a well-composed mosaic.
  • Do not place full bleed mosaics at the top of a page, or within a carousel at the top of a page. This creates legibility problems with the transparent header.
  • Avoid placing double-height mosaics directly below a hero in the-of-page position.
  • Do not stack mosaics taller than double height anywhere on a page.
  • Do not use more than one call-to-action in a group.

Also known as

Gallery

Related

Image
Content placement
Product placement

Options

  • Mosaics follow several predefined patterns as outlined below.
  • Use the class theme-dark for dark images or theme-light for light images to control the text color. This class can be set at the data-f-mosaic level or on the c-mosaic top level.
  • Use the f-background-* classes to style the background color of a mosaic tile, by default no background color is set. The table below shows possible options:
Class Color
.f-background-neutral-10
neutral-10
.f-background-neutral-20
neutral-20
.f-background-neutral-30
neutral-30
.f-background-neutral-45
neutral-45
.f-background-neutral-55
neutral-55
.f-background-neutral-65
neutral-65
.f-background-neutral-75
neutral-75
.f-background-neutral-80
neutral-80
.f-background-neutral-90
neutral-90
.f-background-neutral-100
neutral-100
.f-background-accent
accent
  • Use the f-mask-* classes to add a mask to a mosaic tile, by default no mask is set. The table below shows possible options:
Class Mask
.f-mask-10
10% mask
.f-mask-20
20% mask
.f-mask-40
40% mask
.f-mask-60
60% mask
.f-mask-80
80% mask
.f-mask-100
100% mask

Specifications

Browser support: IE10+, Edge, Safari, Firefox, and Chrome

Development

  • Schema definition: The mosaic schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Pattern one

Placeholder with grey background and dimension watermark without any imagery

Pattern 1 Item 1 - Title

Pattern 1 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 1, Item 2 - Title

<div class="m-mosaic">
    <div class="c-mosaic">
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
            <section class="c-mosaic-placement f-background-neutral-90">
                <picture>
                    <source srcset="http://placehold.it/890x800/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x800/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x800/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 1 Item 1 - Title</h3>
                    <p class="c-subheading">Pattern 1 Item 1 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
            <section class="c-mosaic-placement f-background-neutral-80">
                <picture>
                    <source srcset="http://placehold.it/890x800/2F2F2F/222222" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x800/2F2F2F/222222" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x800/2F2F2F/222222" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/2F2F2F/222222" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/2F2F2F/222222" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 1, Item 2 - Title</h3>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

Pattern two

Placeholder with grey background and dimension watermark without any imagery

Pattern 2 Item 1 - Title

Pattern 2 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 2 Item 2 - Title

Pattern 2 Item 2 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 2 Item 3 - Title

Pattern 2 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 2 Item 4 - Title

Pattern 2 Item 4 - Title

<div class="m-mosaic">
    <div class="c-mosaic">
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
            <section class="c-mosaic-placement f-background-neutral-90">
                <picture>
                    <source srcset="http://placehold.it/890x800/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x800/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x800/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 2 Item 1 - Title</h3>
                    <p class="c-subheading">Pattern 2 Item 1 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 2 Item 2 - Title</h3>
                        <p class="c-subheading">Pattern 2 Item 2 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 2 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 2 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/850x425/5E5E5E/505050" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/800x400/5E5E5E/505050" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/700x400/5E5E5E/505050" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/1084x400/5E5E5E/505050" media="(min-width:768px)">
                        <source srcset="http://placehold.it/768x400/5E5E5E/505050" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 2 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 2 Item 4 - Title</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Pattern three

Placeholder with grey background and dimension watermark without any imagery

Pattern 3 Item 1 - Title

Pattern 3 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 3 Item 2 - Title

Placeholder with grey background and dimension watermark without any imagery

Pattern 3 Item 3 - Title

Pattern 3 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 3 Item 4 - Title

Pattern 3 Item 4 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 3 Item 5 - Title

Pattern 3 Item 5 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 3 Item 6 - Title

Pattern 3 Item 6 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 3 Item 7 - Title

Pattern 3 Item 7 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
            <section class="c-mosaic-placement f-background-neutral-90">
                <picture>
                    <source srcset="http://placehold.it/890x800/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x800/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x800/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 3 Item 1 - Title</h3>
                    <p class="c-subheading">Pattern 3 Item 1 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 3 Item 2 - Title</h3>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 3 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 3 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 3 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 3 Item 4 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div data-f-mosaic="f-vp1-whole f-vp2-half">
                <div class="theme-dark" data-f-mosaic="f-vp1-half f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-55">
                        <picture>
                            <source srcset="http://placehold.it/215x215/767676/666666" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/200x200/767676/666666" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/175x200/767676/666666" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/271x200/767676/666666" media="(min-width:768px)">
                            <source srcset="http://placehold.it/192x200/767676/666666" media="(min-width:540px)">
                            <source srcset="http://placehold.it/270x150/767676/666666" media="(min-width:0)">
                            <img srcset="http://placehold.it/270x150/767676/666666" src="http://placehold.it/270x150/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 3 Item 5 - Title</h3>
                            <p class="c-subheading">Pattern 3 Item 5 - Subtitle</p>
                        </div>
                    </section>
                </div>
                <div class="theme-dark" data-f-mosaic="f-vp1-half f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-45">
                        <picture>
                            <source srcset="http://placehold.it/215x215/919191/777777" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/200x200/919191/777777" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/175x200/919191/777777" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/271x200/919191/777777" media="(min-width:768px)">
                            <source srcset="http://placehold.it/192x200/919191/777777" media="(min-width:540px)">
                            <source srcset="http://placehold.it/270x150/919191/777777" media="(min-width:0)">
                            <img srcset="http://placehold.it/270x150/919191/777777" src="http://placehold.it/270x150/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 3 Item 6 - Title</h3>
                            <p class="c-subheading">Pattern 3 Item 6 - Subtitle</p>
                        </div>
                    </section>
                </div>
                <div class="theme-light" data-f-mosaic="f-vp1-whole f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-30">
                        <picture>
                            <source srcset="http://placehold.it/425x215/ACACAC/888888" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/400x200/ACACAC/888888" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/350x200/ACACAC/888888" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x200/ACACAC/888888" media="(min-width:768px)">
                            <source srcset="http://placehold.it/384x200/ACACAC/888888" media="(min-width:540px)">
                            <source srcset="http://placehold.it/540x150/ACACAC/888888" media="(min-width:0)">
                            <img srcset="http://placehold.it/540x150/ACACAC/888888" src="http://placehold.it/540x150/ACACAC/888888" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 3 Item 7 - Title</h3>
                            <p class="c-subheading">Pattern 3 Item 7 - Subtitle</p>
                            <div>
                                <a href="#" class="c-call-to-action c-glyph">
                                    <span>CALL TO ACTION</span>
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

Pattern four

Placeholder with grey background and dimension watermark without any imagery

Pattern 4 Item 1 - Title

Pattern 4 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 4 Item 2 - Title

Placeholder with grey background and dimension watermark without any imagery

Pattern 4 Item 3 - Title

Pattern 4 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 4 Item 4 - Title

Pattern 4 Item 4 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 4 Item 5 - Title

Pattern 4 Item 5 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 4 Item 6 - Title

Pattern 4 Item 6 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-nautral-90">
                <picture>
                    <source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 4 Item 1 - Title</h3>
                    <p class="c-subheading">Pattern 4 Item 1 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 4 Item 2 - Title</h3>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 4 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 4 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 4 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 4 Item 4 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-55">
                    <picture>
                        <source srcset="http://placehold.it/425x425/767676/666666" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/767676/666666" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/767676/666666" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/767676/666666" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/767676/666666" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/767676/666666" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/767676/666666" src="http://placehold.it/540x300/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 4 Item 5 - Title</h3>
                        <p class="c-subheading">Pattern 4 Item 5 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="theme-light" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-neutral-45">
                <picture>
                    <source srcset="http://placehold.it/850x425/919191/777777" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/919191/777777" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/919191/777777" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1084x400/919191/777777" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/919191/777777" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/919191/777777" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/919191/777777" src="http://placehold.it/540x300/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 4 Item 6 - Title</h3>
                    <p class="c-subheading">Pattern 4 Item 6 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

Pattern five

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 1 - Title

Pattern 5 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 2 - Title

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 3 - Title

Pattern 5 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 4 - Title

Pattern 5 Item 4 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 5 - Title

Pattern 5 Item 5 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 6 - Title

Pattern 5 Item 6 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 7 - Title

Pattern 5 Item 7 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 5 Item 8 - Title

Pattern 5 Item 8 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-neutral-90">
                <picture>
                    <source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 5 Item 1 - Title</h3>
                    <p class="c-subheading">Pattern 5 Item 1 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 5 Item 2 - Title</h3>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 5 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 5 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-neutral-65">
                <picture>
                    <source srcset="http://placehold.it/890x400/5E5E5E/505050" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/5E5E5E/505050" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/5E5E5E/505050" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/5E5E5E/505050" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/5E5E5E/505050" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 5 Item 4 - Title</h3>
                    <p class="c-subheading">Pattern 5 Item 4 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-55">
                    <picture>
                        <source srcset="http://placehold.it/425x425/767676/666666" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/767676/666666" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/767676/666666" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/767676/666666" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/767676/666666" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/767676/666666" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/767676/666666" src="http://placehold.it/540x300/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 5 Item 5 - Title</h3>
                        <p class="c-subheading">Pattern 5 Item 5 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div data-f-mosaic="f-vp1-whole f-vp2-half">
                <div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-45">
                        <picture>
                            <source srcset="http://placehold.it/215x215/919191/777777" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/200x200/919191/777777" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/175x200/919191/777777" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/271x200/919191/777777" media="(min-width:768px)">
                            <source srcset="http://placehold.it/192x200/919191/777777" media="(min-width:540px)">
                            <source srcset="http://placehold.it/270x150/919191/777777" media="(min-width:0)">
                            <img srcset="http://placehold.it/270x150/919191/777777" src="http://placehold.it/270x150/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 5 Item 6 - Title</h3>
                            <p class="c-subheading">Pattern 5 Item 6 - Subtitle</p>
                        </div>
                    </section>
                </div>
                <div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-30">
                        <picture>
                            <source srcset="http://placehold.it/215x215/ACACAC/888888" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/200x200/ACACAC/888888" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/175x200/ACACAC/888888" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/271x200/ACACAC/888888" media="(min-width:768px)">
                            <source srcset="http://placehold.it/192x200/ACACAC/888888" media="(min-width:540px)">
                            <source srcset="http://placehold.it/270x150/ACACAC/888888" media="(min-width:0)">
                            <img srcset="http://placehold.it/270x150/ACACAC/888888" src="http://placehold.it/270x150/ACACAC/888888" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 5 Item 7 - Title</h3>
                            <p class="c-subheading">Pattern 5 Item 7 - Subtitle</p>
                        </div>
                    </section>
                </div>
                <div class="theme-light" data-f-mosaic="f-vp1-whole f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-20">
                        <picture>
                            <source srcset="http://placehold.it/425x215/C8C8C8/AAAAAA" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/400x200/C8C8C8/AAAAAA" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/350x200/C8C8C8/AAAAAA" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x200/C8C8C8/AAAAAA" media="(min-width:768px)">
                            <source srcset="http://placehold.it/384x200/C8C8C8/AAAAAA" media="(min-width:540px)">
                            <source srcset="http://placehold.it/540x150/C8C8C8/AAAAAA" media="(min-width:0)">
                            <img srcset="http://placehold.it/540x150/C8C8C8/AAAAAA" src="http://placehold.it/540x150/C8C8C8/AAAAAA" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 5 Item 8 - Title</h3>
                            <p class="c-subheading">Pattern 5 Item 8 - Subtitle</p>
                            <div>
                                <a href="#" class="c-call-to-action c-glyph">
                                    <span>CALL TO ACTION</span>
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

Pattern six

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 1 - Title

Pattern 6 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 2 - Title

Pattern 6 Item 2 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 3 - Title

Pattern 6 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 4 - Title

Pattern 6 Item 4 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 5 - Title

Pattern 6 Item 5 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 6 - Title

Pattern 6 Item 6 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 7 - Title

Pattern 6 Item 7 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 8 - Title

Pattern 6 Item 8 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 6 Item 9 - Title

<div class="m-mosaic">
    <div class="c-mosaic">
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-neutral-90">
                <picture>
                    <source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 6 Item 1 - Title</h3>
                    <p class="c-subheading">Pattern 6 Item 1 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 6 Item 2 - Title</h3>
                        <p class="c-subheading">Pattern 6 Item 2 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 6 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 6 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 6 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 6 Item 4 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-55">
                    <picture>
                        <source srcset="http://placehold.it/425x425/767676/666666" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/767676/666666" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/767676/666666" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/767676/666666" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/767676/666666" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/767676/666666" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/767676/666666" src="http://placehold.it/540x300/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 6 Item 5 - Title</h3>
                        <p class="c-subheading">Pattern 6 Item 5 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-light" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-45">
                    <picture>
                        <source srcset="http://placehold.it/425x425/919191/777777" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/919191/777777" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/919191/777777" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/919191/777777" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/919191/777777" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/919191/777777" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/919191/777777" src="http://placehold.it/540x300/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 6 Item 6 - Title</h3>
                        <p class="c-subheading">Pattern 6 Item 6 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div data-f-mosaic="f-vp1-whole f-vp2-half">
                <div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-30">
                        <picture>
                            <source srcset="http://placehold.it/215x215/ACACAC/888888" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/200x200/ACACAC/888888" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/175x200/ACACAC/888888" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/271x200/ACACAC/888888" media="(min-width:768px)">
                            <source srcset="http://placehold.it/192x200/ACACAC/888888" media="(min-width:540px)">
                            <source srcset="http://placehold.it/270x150/ACACAC/888888" media="(min-width:0)">
                            <img srcset="http://placehold.it/270x150/ACACAC/888888" src="http://placehold.it/270x150/ACACAC/888888" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 6 Item 7 - Title</h3>
                            <p class="c-subheading">Pattern 6 Item 7 - Subtitle</p>
                        </div>
                    </section>
                </div>
                <div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-20">
                        <picture>
                            <source srcset="http://placehold.it/215x215/C8C8C8/AAAAAA" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/200x200/C8C8C8/AAAAAA" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/175x200/C8C8C8/AAAAAA" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/271x200/C8C8C8/AAAAAA" media="(min-width:768px)">
                            <source srcset="http://placehold.it/192x200/C8C8C8/AAAAAA" media="(min-width:540px)">
                            <source srcset="http://placehold.it/270x150/C8C8C8/AAAAAA" media="(min-width:0)">
                            <img srcset="http://placehold.it/270x150/C8C8C8/AAAAAA" src="http://placehold.it/270x150/C8C8C8/AAAAAA" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 6 Item 8 - Title</h3>
                            <p class="c-subheading">Pattern 6 Item 8 - Subtitle</p>
                        </div>
                    </section>
                </div>
                <div class="theme-light" data-f-mosaic="f-vp1-whole f-height-small">
                    <section class="c-mosaic-placement f-background-neutral-10">
                        <picture>
                            <source srcset="http://placehold.it/425x215/E3E3E3/CCCCCC" media="(min-width:1779px)">
                            <source srcset="http://placehold.it/400x200/E3E3E3/CCCCCC" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/350x200/E3E3E3/CCCCCC" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/542x200/E3E3E3/CCCCCC" media="(min-width:768px)">
                            <source srcset="http://placehold.it/384x200/E3E3E3/CCCCCC" media="(min-width:540px)">
                            <source srcset="http://placehold.it/540x150/E3E3E3/CCCCCC" media="(min-width:0)">
                            <img srcset="http://placehold.it/540x150/E3E3E3/CCCCCC" src="http://placehold.it/540x150/E3E3E3/CCCCCC" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <h3 class="c-heading">Pattern 6 Item 9 - Title</h3>
                            <div>
                                <a href="#" class="c-call-to-action c-glyph">
                                    <span>CALL TO ACTION</span>
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

Pattern seven

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 1 - Title

Pattern 7 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 2 - Title

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 3 - Title

Pattern 7 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 4 - Title

Pattern 7 Item 4 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-90">
                    <picture>
                        <source srcset="http://placehold.it/425x425/171717/2F2F2F" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/171717/2F2F2F" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/171717/2F2F2F" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/171717/2F2F2F" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/171717/2F2F2F" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 7 Item 1 - Title</h3>
                        <p class="c-subheading">Pattern 7 Item 1 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 7 Item 2 - Title</h3>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 7 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 7 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 7 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 7 Item 4 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Pattern eight

Placeholder with grey background and dimension watermark without any imagery

Pattern 8 Item 1 - Title

Pattern 8 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 8 Item 2 - Title

Placeholder with grey background and dimension watermark without any imagery

Pattern 8 Item 3 - Title

Pattern 8 Item 3 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-neutral-90">
                <picture>
                    <source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 8 Item 1 - Title</h3>
                    <p class="c-subheading">Pattern 8 Item 1 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 8 Item 2 - Title</h3>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646" src="http://placehold.it/540x300/464646" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 8 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 8 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Pattern nine

Placeholder with grey background and dimension watermark without any imagery

Pattern 9 Item 2 - Title

Pattern 9 Item 2 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 9 Item 3 - Title

Pattern 9 Item 3 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <div data-grid="col-12" class="m-hyperlink-group">
                        <div>
                            <h3 class="c-heading">Navigation Label</h3>
                            <ul class="c-list f-bare">
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 9 Item 2 - Title</h3>
                        <p class="c-subheading">Pattern 9 Item 2 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-neutral-75">
                <picture>
                    <source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 9 Item 3 - Title</h3>
                    <p class="c-subheading">Pattern 9 Item 3 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

Pattern ten

Placeholder with grey background and dimension watermark without any imagery

Pattern 10 Item 2 - Title

Pattern 10 Item 2 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 10 Item 3 - Title

Pattern 10 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 10 Item 4 - Title

Pattern 10 Item 4 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <div data-grid="col-12" class="m-hyperlink-group">
                        <div>
                            <h3 class="c-heading">Navigation Label</h3>
                            <ul class="c-list f-bare">
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 10 Item 2 - Title</h3>
                        <p class="c-subheading">Pattern 10 Item 2 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646" src="http://placehold.it/540x300/464646" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 10 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 10 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/425x425/5E5E5E" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/5E5E5E" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/5E5E5E" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/5E5E5E" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/5E5E5E" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E" src="http://placehold.it/540x300/5E5E5E" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 10 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 10 Item 4 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Pattern 11

Placeholder with grey background and dimension watermark without any imagery

Pattern 11 Item 1 - Title

Pattern 11 Item 1 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 11 Item 2 - Title

Pattern 11 Item 2 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 11 Item 3 - Title

Pattern 11 Item 3 - Title

Placeholder with grey background and dimension watermark without any imagery

Pattern 11 Item 4 - Title

Pattern 11 Item 4 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 11 Item 1 - Title</h3>
                        <p class="c-subheading">Pattern 11 Item 1 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646" src="http://placehold.it/540x300/464646" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 11 Item 2 - Title</h3>
                        <p class="c-subheading">Pattern 11 Item 2 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/850x425/5E5E5E" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/800x400/5E5E5E" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/700x400/5E5E5E" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/1084x400/5E5E5E" media="(min-width:768px)">
                        <source srcset="http://placehold.it/768x400/5E5E5E" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E" src="http://placehold.it/540x300/5E5E5E" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 11 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 11 Item 3 - Title</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
            <section class="c-mosaic-placement f-background-neutral-90">
                <picture>
                    <source srcset="http://placehold.it/890x800/171717" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x800/171717" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x800/171717" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717" src="http://placehold.it/540x300/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 11 Item 4 - Title</h3>
                    <p class="c-subheading">Pattern 11 Item 4 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>