Copy environment

Gallery

<section class="section  gallery" data-theme="white">
    <div class="section__inner">
        <div class="section__content">
            <div class="gallery__container">
                <div class="gallery__chunk">
                    <div class="image image--fluid gallery__pattern gallery__pattern--one">
                        <div class="image__inner">
                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/img/hero-pattern.svg 192w" data-sizes="auto" alt="" class="image__img lazyload">
                            <noscript>
                <img src="../../inc/img/hero-pattern.svg" srcset="../../inc/img/hero-pattern.svg 192w" sizes="100vw" alt="" class="image__img">
            </noscript>
                        </div>
                    </div>
                    <div class="gallery__pair gallery__pair--one">
                        <div class="gallery__pair-item gallery__intro text editor">
                            <h3>FUN WHILE WORKING HARD</h3>
                            <p>Having fun is just as important as working hard. You simply cannot expect people to be productive without letting loose every now and again. We pride ourselves in the ability to play when we need to unwind.</p>
                        </div>
                        <div class="gallery__pair-item gallery__image-container gallery__image-container--pull-right-1">
                            <div class="image image--background gallery__image gallery__image--landscape">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20270%20180%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/270x180 270w, //placehold.it/540x360 540w, //placehold.it/810x540 810w, //placehold.it/1080x720 1080w, //placehold.it/1350x900 1350w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/270x180" srcset="//placehold.it/270x180 270w, //placehold.it/540x360 540w, //placehold.it/810x540 810w, //placehold.it/1080x720 1080w, //placehold.it/1350x900 1350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gallery__chunk gallery__chunk--smaller">
                    <div class="gallery__pair gallery__pair--two">
                        <div class="gallery__pair-item gallery__image-container gallery__image-container--pull-left-1">
                            <div class="image image--background gallery__image gallery__image--square">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                        </div>
                        <div class="gallery__pair-item gallery__image-container gallery__image-container--pull-right-1">
                            <div class="image image--background gallery__image gallery__image--landscape">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20270%20180%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/270x180 270w, //placehold.it/540x360 540w, //placehold.it/810x540 810w, //placehold.it/1080x720 1080w, //placehold.it/1350x900 1350w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/270x180" srcset="//placehold.it/270x180 270w, //placehold.it/540x360 540w, //placehold.it/810x540 810w, //placehold.it/1080x720 1080w, //placehold.it/1350x900 1350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gallery__chunk">
                    <div class="gallery__pair gallery__pair--reverse gallery__bottom gallery__special-case-1">
                        <div class='gallery__pattern gallery__pattern--two'></div>
                        <div class="image image--fluid gallery__pattern gallery__pattern--three">
                            <div class="image__inner">
                                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/img/hero-pattern.svg 192w" data-sizes="auto" alt="" class="image__img lazyload">
                                <noscript>
                <img src="../../inc/img/hero-pattern.svg" srcset="../../inc/img/hero-pattern.svg 192w" sizes="100vw" alt="" class="image__img">
            </noscript>
                            </div>
                        </div>
                        <div class="gallery__pair-item gallery__pair">
                            <div class="gallery__pair-item gallery__special-case-2 gallery__image-container gallery__image-container--pull-left-1">
                                <div class="image image--background gallery__image gallery__image--landscape">
                                    <div class="image__inner">
                                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20270%20180%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/270x180 270w, //placehold.it/540x360 540w, //placehold.it/810x540 810w, //placehold.it/1080x720 1080w, //placehold.it/1350x900 1350w"
                                            data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/270x180" srcset="//placehold.it/270x180 270w, //placehold.it/540x360 540w, //placehold.it/810x540 810w, //placehold.it/1080x720 1080w, //placehold.it/1350x900 1350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                            <div class="gallery__pair-item gallery__special-case-4 gallery__image-container gallery__image-container--pull-right-1">
                                <div class="image image--background gallery__image gallery__image--square">
                                    <div class="image__inner">
                                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                            data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="gallery__pair-item gallery__pair gallery__pair--reverse">
                            <div class="gallery__pair-item gallery__image-container gallery__image-container--pull-right-1">
                                <div class="image image--background gallery__image gallery__image--square gallery__image--square-big">
                                    <div class="image__inner">
                                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                            data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                            <div class="gallery__pair-item gallery__special-case-3 gallery__outro text editor">
                                <h3>THE OFFICE</h3>
                                <p>To work hard and play hard you need a good office. Our office is in an award-winning modern, wooden building and we’ve worked hard to make it as homely as possible. We have a lot of recreational tools at our disposal and
                                    we have an open-plan layout to encourage direct communication.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "intro": "<h3>FUN WHILE WORKING HARD</h3><p>Having fun is just as important as working hard. You simply cannot expect people to be productive without letting loose every now and again. We pride ourselves in the ability to play when we need to unwind.</p>",
    "outro": "<h3>THE OFFICE</h3><p>To work hard and play hard you need a good office. Our office is in an award-winning modern, wooden building and we’ve worked hard to make it as homely as possible. We have a lot of recreational tools at our disposal and we have an open-plan layout to encourage direct communication.</p>",
    "pairOne": {
      "right": true,
      "left": true
    },
    "pairTwo": {
      "right": true,
      "left": true
    },
    "pairThree": {
      "right": true,
      "left": true
    },
    "pairFour": {
      "right": true,
      "left": true
    }
  }
}