Copy environment

Team Grid

<section class="section section--page-intro " data-theme="white">
    <div class="section__inner">
        <div class="section__content">
            <div class="team-grid">
                <div class="team-grid__inner h-container">
                    <div class="intro team-grid__intro">

                        <h1 class="heading  h2">
                            <span class="heading__small">meet the team of</span>
                            <span class="heading__main">
                    individual masters
            </span>
                        </h1>
                        <div class="intro__content ">
                            During office times we’re a collection of hardworking and motivated developers, committed to delivering the best experiences. When we’re not working, things are a bit different. Go ahead and unlock our secret personalities.
                        </div>
                    </div>
                    <div class="team-grid__mode">
                        <div class="switch team-grid__switch ">
                            <input type="checkbox" id="mode" name="mode" value="1" class="switch__input js-mode-toggle">
                            <label for="mode" class="switch__button">
        <span class="switch__button-indicator">
            <span class="switch__button-item switch__button-item--bow">
                <svg class="icon  switch__button-graphics">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#bow"></use>
</svg>
            </span>
            <span class="switch__button-item switch__button-item--hat">
                <svg class="icon  switch__button-graphics">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#hat"></use>
</svg>
            </span>
            <span class="switch__button-item switch__button-item--face">
                <svg class="icon  switch__button-graphics">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#face"></use>
</svg>
            </span>
        </span>
    </label>
                            <span class="h5 switch__label">
                                            <span class="team-grid__switch-label is-active">do not poke this</span>
                            <span class="team-grid__switch-label">aah, I told you!!!</span>
                            <span class="team-grid__switch-label">phew, I hope you didn’t see much</span>
                            <span class="team-grid__switch-label">s-stop! what are you doing?</span>
                            <span class="team-grid__switch-label">good! don’t do that!</span>
                            <span class="team-grid__switch-label">hey, I told you! stop it!</span>
                            <span class="team-grid__switch-label">okay, for the last time, don’t do that any more!</span>
                            <span class="team-grid__switch-label">this is so embarrassing.</span>
                            <span class="team-grid__switch-label">okay, just, one more time.</span>
                            <span class="team-grid__switch-label">haha, this is kinda fun. do it again!</span>
                            <span class="team-grid__switch-label">oh. mm... okay, just one more</span>
                            <span class="team-grid__switch-label">yeah! wooo!</span>
                            <span class="team-grid__switch-label">don’t... don’t tell anyone about that one.</span>
                            <span class="team-grid__switch-label">...could you please do it again?</span>
                            <span class="team-grid__switch-label">hahaha, this is great!</span>

                            </span>
                        </div>
                    </div>
                    <div class="grid team-grid__team">
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 team-grid__member">

                            <div class="person-card team-grid__member-card">
                                <div class="person-card__figure">
                                    <div class="image image--background person-card__image person-card__image--workmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--background person-card__image person-card__image--playmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                                <div class="person-card__content">
                                    <h3 class="person-card__name">Sander Orav</h3>
                                    <div class="person-card__position">Front-end</div>
                                </div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 team-grid__member">

                            <div class="person-card team-grid__member-card">
                                <div class="person-card__figure">
                                    <div class="image image--background person-card__image person-card__image--workmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--background person-card__image person-card__image--playmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                                <div class="person-card__content">
                                    <h3 class="person-card__name">Sander Orav</h3>
                                    <div class="person-card__position">Front-end</div>
                                </div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 team-grid__member">

                            <div class="person-card team-grid__member-card">
                                <div class="person-card__figure">
                                    <div class="image image--background person-card__image person-card__image--workmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--background person-card__image person-card__image--playmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                                <div class="person-card__content">
                                    <h3 class="person-card__name">Sander Orav</h3>
                                    <div class="person-card__position">Front-end</div>
                                </div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 team-grid__member">

                            <div class="person-card team-grid__member-card">
                                <div class="person-card__figure">
                                    <div class="image image--background person-card__image person-card__image--workmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--background person-card__image person-card__image--playmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                                <div class="person-card__content">
                                    <h3 class="person-card__name">Sander Orav</h3>
                                    <div class="person-card__position">Front-end</div>
                                </div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 team-grid__member">

                            <div class="person-card team-grid__member-card">
                                <div class="person-card__figure">
                                    <div class="image image--background person-card__image person-card__image--workmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--background person-card__image person-card__image--playmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                                <div class="person-card__content">
                                    <h3 class="person-card__name">Sander Orav</h3>
                                    <div class="person-card__position">Front-end</div>
                                </div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 team-grid__member">

                            <div class="person-card team-grid__member-card">
                                <div class="person-card__figure">
                                    <div class="image image--background person-card__image person-card__image--workmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--background person-card__image person-card__image--playmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                                <div class="person-card__content">
                                    <h3 class="person-card__name">Sander Orav</h3>
                                    <div class="person-card__position">Front-end</div>
                                </div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 team-grid__member">

                            <div class="person-card team-grid__member-card">
                                <div class="person-card__figure">
                                    <div class="image image--background person-card__image person-card__image--workmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                    <div class="image image--background person-card__image person-card__image--playmode">
                                        <div class="image__inner">
                                            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                                <div class="person-card__content">
                                    <h3 class="person-card__name">Sander Orav</h3>
                                    <div class="person-card__position">Front-end</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "intro": {
      "heading": {
        "prefix": "meet the team of",
        "text": "individual masters"
      },
      "content": "During office times we’re a collection of hardworking and motivated developers, committed to delivering the best experiences. When we’re not working, things are a bit different. Go ahead and unlock our secret personalities."
    },
    "modeSwitch": {
      "label": {
        "off": "Do not poke this",
        "on": "Ahh, I told you!!!"
      },
      "input": {
        "id": "mode",
        "name": "mode",
        "value": 1
      }
    },
    "switchLabels": [
      "do not poke this",
      "aah, I told you!!!",
      "phew, I hope you didn’t see much",
      "s-stop! what are you doing?",
      "good! don’t do that!",
      "hey, I told you! stop it!",
      "okay, for the last time, don’t do that any more!",
      "this is so embarrassing.",
      "okay, just, one more time.",
      "haha, this is kinda fun. do it again!",
      "oh. mm... okay, just one more",
      "yeah! wooo!",
      "don’t... don’t tell anyone about that one.",
      "...could you please do it again?",
      "hahaha, this is great!"
    ],
    "team": [
      {
        "workmodeImage": {
          "alt": "Team member workmode",
          "src": "//placehold.it/360x420?text=workmode",
          "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w",
          "sources": null
        },
        "playmodeImage": {
          "alt": "Team member playmode",
          "src": "//placehold.it/360x420?text=playmode",
          "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w",
          "sources": null
        },
        "name": "Sander Orav",
        "position": "Front-end"
      },
      {
        "workmodeImage": {
          "alt": "Team member workmode",
          "src": "//placehold.it/360x420?text=workmode",
          "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w",
          "sources": null
        },
        "playmodeImage": {
          "alt": "Team member playmode",
          "src": "//placehold.it/360x420?text=playmode",
          "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w",
          "sources": null
        },
        "name": "Sander Orav",
        "position": "Front-end"
      },
      {
        "workmodeImage": {
          "alt": "Team member workmode",
          "src": "//placehold.it/360x420?text=workmode",
          "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w",
          "sources": null
        },
        "playmodeImage": {
          "alt": "Team member playmode",
          "src": "//placehold.it/360x420?text=playmode",
          "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w",
          "sources": null
        },
        "name": "Sander Orav",
        "position": "Front-end"
      },
      {
        "workmodeImage": {
          "alt": "Team member workmode",
          "src": "//placehold.it/360x420?text=workmode",
          "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w",
          "sources": null
        },
        "playmodeImage": {
          "alt": "Team member playmode",
          "src": "//placehold.it/360x420?text=playmode",
          "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w",
          "sources": null
        },
        "name": "Sander Orav",
        "position": "Front-end"
      },
      {
        "workmodeImage": {
          "alt": "Team member workmode",
          "src": "//placehold.it/360x420?text=workmode",
          "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w",
          "sources": null
        },
        "playmodeImage": {
          "alt": "Team member playmode",
          "src": "//placehold.it/360x420?text=playmode",
          "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w",
          "sources": null
        },
        "name": "Sander Orav",
        "position": "Front-end"
      },
      {
        "workmodeImage": {
          "alt": "Team member workmode",
          "src": "//placehold.it/360x420?text=workmode",
          "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w",
          "sources": null
        },
        "playmodeImage": {
          "alt": "Team member playmode",
          "src": "//placehold.it/360x420?text=playmode",
          "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w",
          "sources": null
        },
        "name": "Sander Orav",
        "position": "Front-end"
      },
      {
        "workmodeImage": {
          "alt": "Team member workmode",
          "src": "//placehold.it/360x420?text=workmode",
          "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w",
          "sources": null
        },
        "playmodeImage": {
          "alt": "Team member playmode",
          "src": "//placehold.it/360x420?text=playmode",
          "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w",
          "sources": null
        },
        "name": "Sander Orav",
        "position": "Front-end"
      }
    ]
  }
}