Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container-fluid">
  <div class="row">
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Accomodation -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="accomodation__house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.3 96.7">
                 <path d="M33.926 49.255c-7.8 0-14.1-6.3-14.1-14.1s6.3-14.1 14.1-14.1 14.1 6.3 14.1 14.1c-.1 7.8-6.4 14.1-14.1 14.1zm0-22.7c-4.8 0-8.7 3.9-8.7 8.7s3.9 8.7 8.7 8.7c4.8 0 8.7-3.9 8.7-8.7 0-4.8-3.9-8.7-8.7-8.7z"/>
                 <path d="M133.726 37.155l-10.3-12-.3-.3-10.1-11.8-.3-.3-10.2-11.9c-.5-.6-1.3-.9-2-.9h-66.5c-.7 0-1.3.3-1.8.7l-.1.1-.1.1-31.4 36.3c-.4.5-.7 1.1-.7 1.8 0 1.5 1.2 2.7 2.7 2.7h2.6v52.4c0 1.5 1.2 2.7 2.7 2.7h118.3c1.5 0 2.7-1.2 2.7-2.7v-52.4h2.6c.6 0 1.3-.2 1.8-.7 1.2-1 1.3-2.7.4-3.8zm-67.4-.9l-5.8-6.7h59.4l5.8 6.7h-59.4zm49.1-12.1h-59.4l-5.8-6.7h59.4l5.8 6.7zm-16.2-18.8l5.8 6.7h-59.4l-5.8-6.7h59.4zm-56.6 85.9h-17.4v-16.7c0-4.8 3.9-8.7 8.7-8.7 4.8 0 8.7 3.9 8.7 8.7v16.7zm14.5-52.3l.2 52.4h-9.4v-16.7c0-7.8-6.3-14.1-14.1-14.1s-14.1 6.3-14.1 14.1v16.7h-9.1v-52.4c0-1.3-.9-2.4-2.2-2.6l25.4-29.5 25.4 29.5c-1.2.2-2.1 1.3-2.1 2.6zm5.6 52.3l-.2-49.7h61.1v49.7h-60.9z"/>
                 <path d="M113.326 48.855h-40.6c-1.5 0-2.7 1.2-2.7 2.7v29.8c0 1.5 1.2 2.7 2.7 2.7h40.6c1.5 0 2.7-1.2 2.7-2.7v-29.8c0-1.5-1.2-2.7-2.7-2.7zm-37.9 5.4h14.9v24.4h-14.9v-24.4zm35.2 24.4h-14.9v-24.4h14.9v24.4z"/>
              </svg>
              <svg class="accomodation__tree-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 79.5">
                 <path d="M17.9 0C6.3 0 0 27.4 0 36.5c0 10.4 6.6 19 15.3 20.5v19.8c0 1.5 1.2 2.7 2.7 2.7s2.7-1.2 2.7-2.7V57c8.4-1.5 15.1-10.1 15.1-20.5C35.8 27.4 29.4 0 17.9 0zm2.6 51.5v-5.1l5.7-6.6c.9-1.1.8-2.8-.3-3.8-1.1-.9-2.8-.8-3.8.3l-1.7 1.9v-6c-.1-1.5-1.3-2.6-2.8-2.6-1.5.1-2.6 1.3-2.6 2.8v5.8l-1.5-1.9c-1-1.1-2.6-1.2-3.8-.3-1.1 1-1.2 2.6-.3 3.8l5.7 6.6v5.1c-5.7-1.5-9.9-7.7-9.9-15 0-4.2 1.5-12.3 4.3-19.7C12.7 8.3 16 5.3 17.8 5.3c1.8 0 5.1 3 8.3 11.5 2.8 7.4 4.3 15.5 4.3 19.7 0 7.4-4.2 13.5-9.9 15z"/>
              </svg>
              <svg class="accomodation__tree-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.8 62.4">
                 <path d="M14.4 0C5.1 0 0 21.5 0 28.7 0 36.8 5.1 43.5 11.7 45v14.7c0 1.5 1.2 2.7 2.7 2.7s2.7-1.2 2.7-2.7V45c6.6-1.5 11.7-8.2 11.7-16.3C28.8 21.6 23.7 0 14.4 0zM17 39.4v-2.9l4.2-4.9c.9-1.1.8-2.8-.3-3.7-1.1-1-2.8-.9-3.8.2l-.2.2v-3c-.1-1.5-1.3-2.6-2.8-2.6-1.5.1-2.6 1.3-2.6 2.8v2.8l-.2-.2c-1-1.1-2.6-1.2-3.7-.3-1.1.9-1.3 2.6-.3 3.8l4.2 4.9v2.9C7.8 38 5.1 33.7 5.1 28.7c0-8.7 5.7-23.3 9.1-23.3s9.1 14.6 9.1 23.3c.1 5-2.6 9.3-6.3 10.7z"/>
              </svg>
           </div>
           <div class="service-card__content">
              <strong class="service-card__title">Accommodations</strong>
              <div class="service-card__body">
                 <div class="wysiwyg">Located in a safe and peaceful neighbourhood, our Jacques-Cantin Lodge is for&nbsp;you.</div>
              </div>
           </div>
        </div>
     </div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Transportation -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="transportation__car" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.7 103.3">
                 <path d="M183.4 38.9l-16.1-6.6c-1.6-2.3-5.9-8.8-11.9-18.9C147.5.1 135.8 0 134.2 0H78.4C64.7 0 59 7.5 57.8 9.3L40 31.7c-4.2 1.1-17.7 4.9-26.4 7C.3 42 0 52.1 0 52.5v14c0 10.5 8.5 19 19 19h.2c2.2 10.1 11.3 17.7 22.1 17.7s19.8-7.6 22.1-17.7h67c2.2 10.1 11.3 17.7 22.1 17.7s19.8-7.6 22.1-17.7h.2c10.5 0 19-8.5 19-19v-14c-.1-7.8-6.5-12.2-10.4-13.6zM41.3 95.3c-8 0-14.6-6.5-14.6-14.6s6.5-14.6 14.6-14.6 14.6 6.5 14.6 14.6-6.6 14.6-14.6 14.6zm111.1 0c-8 0-14.6-6.5-14.6-14.6s6.5-14.6 14.6-14.6S167 72.7 167 80.7s-6.5 14.6-14.6 14.6zm33.3-28.7c0 6-4.9 10.9-10.9 11-1.5-11-11-19.4-22.4-19.4-11.4 0-20.8 8.5-22.4 19.4H63.6c-1.5-11-11-19.4-22.4-19.4-11.4 0-20.8 8.5-22.4 19.4-6-.1-10.9-5-10.9-11v-14c.1-.6.7-4.5 7.5-6.2C25.8 43.9 43.2 39 43.3 39c.8-.2 1.5-.7 2.1-1.4l18.7-23.5c.1-.2.2-.3.3-.5.3-.2 3.7-5.6 14-5.6h56.1c.3 0 8.3-.1 14 9.4 7.8 13.2 12.7 20.1 13 20.4.4.6 1 1.1 1.7 1.4l17.3 7.1s.1 0 .2.1c.2.1 5.1 1.9 5.1 6.2v14z"/>
                 <path d="M115.2 37.9H59.4c-1.5 0-2.9-.9-3.6-2.3-.7-1.4-.5-3 .5-4.2l11.2-14.1c1-1.5 4.8-6.3 13.8-6.3h33.9c2.2 0 4 1.8 4 4v18.9c0 2.3-1.8 4-4 4zm-47.5-8h43.5V19H81.3c-4.9 0-6.8 2.3-7 2.6-.1.2-.2.3-.3.5l-6.3 7.8zM115.2 49.4h-10.9c-2.2 0-4-1.8-4-4s1.8-4 4-4h10.9c2.2 0 4 1.8 4 4s-1.8 4-4 4z"/>
              </svg>
              <svg class="transportation__sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.3 65.3">
                 <path d="M32.6 65.3C14.6 65.3 0 50.6 0 32.6 0 14.6 14.6 0 32.6 0s32.6 14.6 32.6 32.6c.1 18-14.6 32.7-32.6 32.7zm0-57.3C19.1 8 8 19.1 8 32.6c0 13.6 11.1 24.6 24.6 24.6s24.6-11.1 24.6-24.6C57.3 19.1 46.2 8 32.6 8z"/>
              </svg>
              <svg class="transportation__cloud-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 51.2">
                 <path class="filler" d="M33.3 3.5l13.2 6.1 3.4 5.7 12.2 1.2 19.5 16.9-9 13.8H11.2l-8.6-9.9L11 25.4l8.9-10.1 3.3-9z"/>
                 <path d="M68.3 51.2H15.7C7.1 51.2 0 44.1 0 35.4c0-7.8 5.7-14.3 13.1-15.5C13.3 8.9 22.3 0 33.3 0c8.2 0 15.4 5 18.5 12.2 1.5-.5 3.1-.7 4.8-.7 5.9 0 11.2 3.3 13.9 8.4 7.6 1 13.5 7.6 13.5 15.5 0 8.7-7 15.8-15.7 15.8zM15.7 27.7c-4.3 0-7.7 3.5-7.7 7.7s3.5 7.7 7.7 7.7h52.6c4.3 0 7.7-3.5 7.7-7.7s-3.4-7.7-7.7-7.7h-.4c-1.8.1-3.5-1.1-4-2.8-1-3.2-4-5.4-7.4-5.4-1.8 0-3.4.6-4.8 1.7-1.1.9-2.7 1.1-4 .6-1.3-.5-2.3-1.8-2.5-3.2-.8-6-6-10.6-12-10.6-6.7 0-12.1 5.5-12.1 12.1 0 .9.1 1.9.3 2.8.3 1.3-.1 2.7-1 3.6-.9 1-2.2 1.4-3.6 1.2-.3.1-.7 0-1.1 0z"/>
              </svg>
              <svg class="transportation__cloud-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.4 63.3">
                 <path class="filler" d="M41 3.2l16.8 9.9 4 8h16.6l22.3 15.7v15.1l-8 6.6H16L4.9 48.8 4 38.1l15.6-10.9 5-16.2z"/>
                 <path d="M86.4 63.3H19c-10.5 0-19-8.5-19-19 0-9.8 7.4-17.8 16.9-18.9v-.7C16.8 11.1 27.9 0 41.5 0 52 0 61.1 6.6 64.6 16c2.1-.8 4.4-1.2 6.8-1.2 7.4 0 13.9 4.2 17.1 10.7 9.5 1 16.9 9.1 16.9 18.9 0 10.4-8.5 18.9-19 18.9zM19 33.3c-6.1 0-11 4.9-11 11s4.9 11 11 11h67.4c6.1 0 11-4.9 11-11s-4.9-11-11-11h-.5c-1.9.1-3.5-1.1-4-2.8-1.4-4.6-5.7-7.8-10.5-7.8-2.5 0-4.9.8-6.8 2.4-1.1.9-2.7 1.1-4 .6-1.3-.5-2.3-1.8-2.5-3.2C57 14.2 49.9 8 41.5 8c-9.2 0-16.7 7.5-16.7 16.7 0 1.3.2 2.6.5 3.9.3 1.3-.1 2.7-1 3.6-.9 1-2.2 1.4-3.6 1.2-.6-.1-1.2-.1-1.7-.1z"/>
              </svg>
           </div>
           <div class="service-card__content">
              <strong class="service-card__title">Transportation program</strong>
              <div class="service-card__body">
                 <div class="wysiwyg">Volunteer drivers provide transportation for&nbsp;residents.</div>
              </div>
           </div>
        </div>
     </div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Community -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="community__computer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.9 193.2">
                 <path d="M204.9 0H4C1.8 0 0 1.8 0 4v140.3c0 2.2 1.8 4 4 4h49.1l-38 38c-1.1 1.1-1.5 2.9-.9 4.4s2.1 2.5 3.7 2.5H191c1.6 0 3.1-1 3.7-2.5s.3-3.2-.9-4.4l-38-38h49.1c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zm-4 8v96H8V8h192.9zm-19.5 177.2H27.5l36.9-36.9h80.1l36.9 36.9zM8 140.3V112h192.9v28.3H8z"/>
                 <circle cx="104.5" cy="126.2" r="6.6"/>
              </svg>
              <div class="community__person-1">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.9 70.6">
                    <path d="M36.8 30.4h-4.1c5-2.8 8.4-8.1 8.4-14.2C41 7.3 33.8 0 24.9 0S8.7 7.3 8.7 16.2c0 6.1 3.4 11.4 8.4 14.2h-2C6.8 30.4 0 39.1 0 49.7v16.8c0 2.2 1.8 4 4 4s4-1.8 4-4V49.7c0-6.1 3.3-11.4 7.1-11.4h21.7c3.8 0 7.1 5.3 7.1 11.4v16.8c0 2.2 1.8 4 4 4s4-1.8 4-4V49.7c0-10.6-6.8-19.3-15.1-19.3zM24.9 8c4.5 0 8.2 3.7 8.2 8.2s-3.7 8.2-8.2 8.2-8.2-3.7-8.2-8.2S20.3 8 24.9 8z"/>
                 </svg>
              </div>
              <div class="community__person-2">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.9 70.6">
                    <path d="M36.8 30.4h-4.1c5-2.8 8.4-8.1 8.4-14.2C41 7.3 33.8 0 24.9 0S8.7 7.3 8.7 16.2c0 6.1 3.4 11.4 8.4 14.2h-2C6.8 30.4 0 39.1 0 49.7v16.8c0 2.2 1.8 4 4 4s4-1.8 4-4V49.7c0-6.1 3.3-11.4 7.1-11.4h21.7c3.8 0 7.1 5.3 7.1 11.4v16.8c0 2.2 1.8 4 4 4s4-1.8 4-4V49.7c0-10.6-6.8-19.3-15.1-19.3zM24.9 8c4.5 0 8.2 3.7 8.2 8.2s-3.7 8.2-8.2 8.2-8.2-3.7-8.2-8.2S20.3 8 24.9 8z"/>
                 </svg>
              </div>
              <svg class="community__bubble" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.3 82.9">
                 <path class="filler" d="M43.7 60.8v18.1l18.1-18.1h18.6l18.1 18.1V60.8h11.3c15.7 0 28.4-12.7 28.4-28.4S125.6 4 109.9 4H32.4C16.7 4 4 16.7 4 32.4s12.7 28.4 28.4 28.4h11.3" fill="#fdda30"/>
                 <path d="M98.6 82.9c-1 0-2.1-.4-2.8-1.2l-17-17H63.5l-17 17c-1.1 1.1-2.9 1.5-4.4.9-1.5-.6-2.5-2.1-2.5-3.7V64.8h-7.3C14.5 64.8 0 50.3 0 32.4S14.5 0 32.4 0H110c17.9 0 32.4 14.5 32.4 32.4S127.9 64.8 110 64.8h-7.3v14.1c0 1.6-1 3.1-2.5 3.7-.5.2-1.1.3-1.6.3zM61.9 56.8h18.6c1.1 0 2.1.4 2.8 1.2l11.3 11.3v-8.5c0-2.2 1.8-4 4-4h11.3c13.5 0 24.4-10.9 24.4-24.4S123.4 8 109.9 8H32.4C18.9 8 8 18.9 8 32.4s10.9 24.4 24.4 24.4h11.3c2.2 0 4 1.8 4 4v8.5L59 58c.8-.8 1.8-1.2 2.9-1.2z"/>
              </svg>
           </div>
           <div class="service-card__content">
            <strong class="service-card__title">Online community</strong>
            <div class="service-card__body">
               <div class="wysiwyg">We help people with cancer and their loved ones share their experiences.</div>
            </div>
          </div>
        </div>
     </div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
      <!-- Quit Smoking -->
      <div class="service-card">
         <div class="service-card__media">
            <svg class="quit-smoking__hand" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.4 130.8">
               <path d="M228.5 17c-5.6-5.6-14.2-6.3-20.6-2.2-5.6-5.1-13.9-5.7-20.1-1.8-6.5-5.9-16.6-5.8-22.9.5l-25.3 25.3h-4.8c-2.2-.2-3.2-.7-3.6-.9h-.1l-.1-.1c-.7-.7-1.1-1.7-1.1-2.8s.4-2 1.1-2.8l.2-.2.2-.2c2.1-1 3.8-2.1 5.2-3.5 3.1-3.1 4.8-7.3 4.8-11.7 0-4.4-1.7-8.6-4.8-11.7-3-3.2-7.1-4.9-11.6-4.9-4.4 0-8.6 1.7-11.7 4.8L94.1 24.1c-2.6 2.6-4.9 6.5-5.1 7 0 .1-.1.1-.1.2L85 39.1c-.1.2-.1.3-.2.5-.1.3-.7 1.5-2.4 3.2L1.2 124c-1.1 1.1-1.5 2.9-.9 4.4.6 1.5 2.1 2.5 3.7 2.5h69.4c1.1 0 2.1-.4 2.8-1.2l53-53c1.1-1.2 2.6-1.8 4.2-1.8h54.8c3.8 0 7.3-1.5 9.9-4.2l30.3-30.3c6.6-6.5 6.6-17 .1-23.4zm-31.7 1.4c1.9 0 3.7.6 5.2 1.8l-18.6 18.6h-10.5l17.9-17.9c1.5-1.7 3.7-2.5 6-2.5zm-26.2.7c3.1-3.1 7.9-3.3 11.2-.7l-20.4 20.4H151l19.6-19.7zm52.3 15.6l-27.5 27.5-2.8 2.9c-1.1 1.2-2.6 1.8-4.2 1.8h-54.9-.1c-3.7.1-7.2 1.6-9.7 4.2l-51.8 51.8H13.7l74.4-74.4c2.7-2.7 3.8-5 4.2-5.9l3.8-7.6c.6-1 2.3-3.7 3.8-5.2L119 10.5c1.6-1.6 3.8-2.5 6-2.5 2.3 0 4.4.9 6 2.5 1.6 1.6 2.5 3.8 2.5 6 0 2.3-.9 4.4-2.5 6-.7.7-1.6 1.3-2.9 1.9-1.4.6-2.4 1.6-2.8 2.1-2.2 2.2-3.4 5.2-3.4 8.3 0 3.1 1.2 6.1 3.4 8.3.8.9 3.4 3.1 9.1 3.5H185c1.1 0 2.1-.4 2.8-1.2l22.4-22.3.6-.6c3.3-3.3 8.8-3.3 12.1 0 3.3 3.5 3.3 8.9 0 12.2z"/>
            </svg>
            <svg class="quit-smoking__cigarette" viewBox="0 0 170.6 30.9">
               <path d="M166.6 0H4C1.8 0 0 1.8 0 4v22.9c0 2.2 1.8 4 4 4h162.6c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zm-135 8v14.9H24V8h7.6zM8 8h8v14.9H8V8zm154.6 14.9h-123V8h123v14.9z"/>
            </svg>
            <svg class="quit-smoking__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.5 84.5">
               <path class="filler" d="M5.3 20.1L21.9 5l18.5 21L62.9 5l16.2 16.6-19.2 20.6 19.2 21.1-14 16.6L42.2 60 19.7 79.9 3.8 64.8l19.6-20z"/>
               <path d="M64.3 84.5c-1 0-2-.4-2.8-1.2L42.2 64.1 23 83.3c-1.6 1.6-4.1 1.6-5.7 0L1.2 67.1c-1.6-1.6-1.6-4.1 0-5.7l19.2-19.2L1.2 23c-1.6-1.6-1.6-4.1 0-5.7L17.4 1.2c1.6-1.6 4.1-1.6 5.7 0l19.2 19.2L61.5 1.2c1.6-1.6 4.1-1.6 5.7 0l16.2 16.2c1.6 1.6 1.6 4.1 0 5.7L64.1 42.2l19.2 19.2c1.6 1.6 1.6 4.1 0 5.7L67.1 83.3c-.8.8-1.8 1.2-2.8 1.2zM42.2 54.4c1 0 2 .4 2.8 1.2l19.2 19.2 10.5-10.5-19.1-19.2c-1.6-1.6-1.6-4.1 0-5.7l19.2-19.2L64.3 9.7 45.1 28.9c-1.6 1.6-4.1 1.6-5.7 0L20.2 9.7 9.7 20.2l19.2 19.2c1.6 1.6 1.6 4.1 0 5.7L9.7 64.3l10.5 10.5 19.2-19.2c.8-.8 1.8-1.2 2.8-1.2z"/>
            </svg>
         </div>
         <div class="service-card__content">
            <strong class="service-card__title">Quit smoking</strong>
            <div class="service-card__body">
               <div class="wysiwyg">Aliquam faucibus, odio nec commodo</div>
            </div>
         </div>
      </div>
   </div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
      <!-- Camp -->
      <div class="service-card">
         <div class="service-card__media">
            <svg class="camp__logs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82.4 60.8">
               <path d="M74.6 31.6l-2.1-1.2 2.1-1.2c3.6-2.1 6.2-5.5 7.3-9.5s.5-8.3-1.5-11.9c-2.1-3.6-5.5-6.2-9.5-7.3-4.1-1-8.3-.5-11.9 1.6L41.2 12.3 23.5 2.1C19.8 0 15.6-.5 11.6.5c-4 1.1-7.4 3.7-9.5 7.3S-.5 15.6.6 19.7c1.1 4 3.7 7.4 7.3 9.5l2.1 1.2-2.1 1.2C.3 35.9-2.2 45.5 2.1 53c2.1 3.6 5.5 6.2 9.5 7.3 1.4.4 2.7.5 4.1.5 2.7 0 5.4-.7 7.8-2.1l17.8-10.3L59 58.7c2.4 1.4 5.1 2.1 7.8 2.1 1.4 0 2.7-.2 4.1-.5 4-1.1 7.4-3.7 9.5-7.3 2.1-3.6 2.6-7.8 1.5-11.9s-3.7-7.4-7.3-9.5zm-62.8-9.4c-1.8-1-3-2.7-3.5-4.6-.5-2-.3-4 .7-5.8s2.7-3 4.6-3.5c2-.5 4-.3 5.8.7l13.8 8-15.3 8.8-6.1-3.6zm7.7 29.6c-1.8 1-3.8 1.3-5.8.7-2-.5-3.7-1.8-4.7-3.5s-1.3-3.8-.7-5.8c.5-2 1.8-3.6 3.5-4.6l8.1-4.7L63 9c1.2-.7 2.5-1 3.8-1 .7 0 1.3.1 2 .3 2 .5 3.6 1.8 4.6 3.5 1 1.8 1.3 3.8.7 5.8-.5 2-1.8 3.6-3.5 4.6L19.5 51.8zM73.4 49c-1 1.8-2.7 3-4.6 3.5-2 .5-4 .3-5.8-.7l-13.8-7.9L64.5 35l6.1 3.5c3.7 2.2 4.9 6.8 2.8 10.5z"/>
            </svg>
            <svg class="camp__flames" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.1 62.1">
               <path d="M23.4 62.1h-1.2c-8.3 0-16-4.5-20.1-11.9-4.5-8.4-1.2-16.9 3-21.7l.3-.3c3.5-3.3 2.3-9.3 2.3-9.3-.4-1.9.6-3.8 2.3-4.6 1.3-.6 2.7-.4 3.9.3.1-.2.2-.4.2-.6 1.8-4.7 4.7-9 8.3-12.4l.1-.1c2.6-2.2 6.6-1.9 8.8.7 1.3 1.5 1.8 3.5 1.4 5.4-1.7 7.9.7 10 3 12 9.4 8.2 9.5 18.2 9.4 20.4 0 7-2.2 12.5-6.5 16.5-5.5 5-12.5 5.6-15.2 5.6zm-.8-8h.8c1.4 0 6.3-.3 9.8-3.5 2.6-2.4 3.9-6 3.9-10.8v-.2c0-.8.3-8-6.6-14-3.4-3-6.4-6.8-6.3-13.7-1 1.6-1.9 3.3-2.6 5-.5 1.3-.9 2.6-1.1 4-.2 1.2-.5 2.8-.5 3.7 2 4 3.9 8.6 4.3 12 .2 2.2-1.4 4.2-3.6 4.4-2.2.2-4.2-1.4-4.4-3.6-.2-1.8-1.2-4.4-2.5-7.2-.7 1.3-1.6 2.5-2.7 3.6-.9 1-5.1 6.5-1.9 12.5 2.7 4.9 7.8 7.9 13.4 7.8zm2.3-48.2z"/>
            </svg>
            <svg class="camp__tree-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.1 144.4">
               <path d="M68.7 107.5L60 88.4h3.1c1.4 0 2.6-.7 3.4-1.8.7-1.1.8-2.6.3-3.8L56.7 60.5h1.8c1.3 0 2.6-.7 3.3-1.9.7-1.1.8-2.6.2-3.8L38.2 2.3C37.5.9 36.1 0 34.5 0s-3 .9-3.6 2.3L7 54.8c-.6 1.2-.5 2.6.2 3.8.7 1.1 1.9 1.8 3.3 1.9h1.8l-10 22.2c-.6 1.2-.5 2.7.3 3.8.7 1.1 2 1.8 3.4 1.8h3.1L.4 107.4c-.6 1.2-.5 2.7.3 3.8s2 1.8 3.4 1.8h26.5v27.2c0 2.2 1.8 4 4 4s4-1.8 4-4V113h26.5c1.4 0 2.6-.7 3.4-1.8s.8-2.4.2-3.7zm-58.5-2.3L18.9 86c.6-1.2.5-2.7-.3-3.8-.7-1.1-2-1.8-3.4-1.8h-3.1l10-22.1c.6-1.2.5-2.6-.2-3.8-.7-1.1-1.9-1.8-3.3-1.9h-1.8l17.7-39 17.7 39h-1.8c-1.3 0-2.6.7-3.3 1.9-.7 1.1-.8 2.6-.2 3.8l10 22.1h-3.1c-1.4 0-2.6.7-3.4 1.8-.7 1.1-.8 2.6-.3 3.8l8.7 19.1H10.2z"/>
            </svg>
            <svg class="camp__tree-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.7 105.7">
               <path d="M51.4 77.7l-5.5-12.1h.5c1.4 0 2.6-.7 3.4-1.8.7-1.1.8-2.6.3-3.8l-6.5-14.4c1.2-.1 2.2-.8 2.9-1.8.7-1.1.8-2.6.2-3.8L29.5 2.3C28.9.9 27.4 0 25.9 0s-3 .9-3.6 2.3L5.1 39.9c-.6 1.2-.5 2.6.2 3.8.6 1 1.7 1.7 2.9 1.8L1.8 59.9c-.6 1.2-.5 2.7.3 3.8.7 1.1 2 1.8 3.4 1.8H6L.4 77.7c-.6 1.2-.5 2.7.3 3.8s2 1.8 3.4 1.8H22v18.4c0 2.2 1.8 4 4 4s4-1.8 4-4V83.3h17.9c1.4 0 2.6-.7 3.4-1.8s.6-2.6.1-3.8zm-41.2-2.4l5.5-12.1c.6-1.2.5-2.7-.3-3.8-.7-1.1-2-1.8-3.4-1.8h-.5l6.4-14.2c.6-1.2.5-2.6-.2-3.8-.6-1-1.7-1.7-2.9-1.8l11-24.1 11 24.1c-1.2.1-2.2.8-2.9 1.8-.7 1.1-.8 2.6-.2 3.8l6.4 14.2h-.5c-1.4 0-2.6.7-3.4 1.8s-.7 2.6-.2 3.8l5.5 12.1H10.2z"/>
            </svg>
            <svg class="camp__tree-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78 176">
               <path d="M77.6 122.9l-10.3-22.7h4.5c1.4 0 2.6-.7 3.4-1.8.7-1.1.8-2.6.3-3.8l-12-26.4 3-.1c1.3 0 2.6-.7 3.3-1.9.7-1.1.8-2.6.2-3.8L42.6 2.3C42 .9 40.6 0 39 0s-3 .9-3.6 2.3L8 62.5c-.6 1.2-.5 2.6.2 3.8.7 1.1 1.9 1.8 3.3 1.9l3 .1L2.6 94.5c-.6 1.2-.5 2.7.3 3.8.7 1.1 2 1.8 3.4 1.8h4.5L.4 122.9c-.6 1.2-.5 2.7.3 3.8s2 1.8 3.4 1.8h31V172c0 2.2 1.8 4 4 4s4-1.8 4-4v-43.4h31c1.4 0 2.6-.7 3.4-1.8s.7-2.7.1-3.9zm-67.4-2.4l10.3-22.7c.6-1.2.5-2.7-.3-3.8-.7-1.1-2-1.8-3.4-1.8h-4.5l12-26.2c.6-1.2.5-2.6-.2-3.8-.7-1.1-1.9-1.8-3.3-1.9l-3-.1L39 13.7l21.2 46.6-3 .1c-1.3 0-2.6.7-3.3 1.9-.7 1.1-.8 2.6-.2 3.8l11.9 26.1h-4.5c-1.4 0-2.6.7-3.4 1.8-.7 1.1-.8 2.6-.3 3.8l10.3 22.7H10.2z"/>
            </svg>
            <svg class="camp__tree-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.9 130.7">
               <path d="M62.6 96.9L55 80.3h2.2c1.4 0 2.6-.7 3.4-1.8.7-1.1.8-2.6.3-3.8L52 55.2h1c1.3 0 2.6-.7 3.3-1.9.7-1.1.8-2.6.2-3.8L35.1 2.3C34.5.9 33 0 31.5 0s-3 .9-3.6 2.3L6.4 49.5c-.6 1.2-.5 2.6.2 3.8.7 1.1 1.9 1.8 3.3 1.9h1L2.1 74.7c-.6 1.2-.5 2.7.3 3.8.7 1.1 2 1.8 3.4 1.8H8L.4 96.9c-.6 1.2-.5 2.7.3 3.8s2 1.8 3.4 1.8h23.5v24.1c0 2.2 1.8 4 4 4s4-1.8 4-4v-24.1h23.5c1.4 0 2.6-.7 3.4-1.8s.6-2.5.1-3.8zm-52.4-2.3L17.8 78c.6-1.2.5-2.7-.3-3.8-.7-1.1-2-1.8-3.4-1.8h-2.2L20.7 53c.6-1.2.5-2.6-.2-3.8-.7-1.1-1.9-1.8-3.3-1.9h-1l15.3-33.7 15.3 33.7h-1c-1.3 0-2.6.7-3.3 1.9-.7 1.1-.8 2.6-.2 3.8L51 72.3h-2.2c-1.4 0-2.6.7-3.4 1.8-.7 1.1-.8 2.6-.3 3.8l7.6 16.6H10.2z"/>
            </svg>
         </div>
         <div class="service-card__content">
            <strong class="service-card__title">Camp Good times</strong>
            <div class="service-card__body">
               <div class="wysiwyg">Phasellus dignissim, tellus&nbsp;in.</div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-6 col-sm-4 col-md-3 col-xl-2">
    <!-- Financial Support -->
    <div class="service-card">
       <div class="service-card__media">
          <svg class="financial-support__hand" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.4 130.8">
             <path d="M228.5 17c-5.6-5.6-14.2-6.3-20.6-2.2-5.6-5.1-13.9-5.7-20.1-1.8-6.5-5.9-16.6-5.8-22.9.5l-25.3 25.3h-4.8c-2.2-.2-3.2-.7-3.6-.9h-.1l-.1-.1c-.7-.7-1.1-1.7-1.1-2.8s.4-2 1.1-2.8l.2-.2.2-.2c2.1-1 3.8-2.1 5.2-3.5 3.1-3.1 4.8-7.3 4.8-11.7 0-4.4-1.7-8.6-4.8-11.7-3-3.2-7.1-4.9-11.6-4.9-4.4 0-8.6 1.7-11.7 4.8L94.1 24.1c-2.6 2.6-4.9 6.5-5.1 7 0 .1-.1.1-.1.2L85 39.1c-.1.2-.1.3-.2.5-.1.3-.7 1.5-2.4 3.2L1.2 124c-1.1 1.1-1.5 2.9-.9 4.4.6 1.5 2.1 2.5 3.7 2.5h69.4c1.1 0 2.1-.4 2.8-1.2l53-53c1.1-1.2 2.6-1.8 4.2-1.8h54.8c3.8 0 7.3-1.5 9.9-4.2l30.3-30.3c6.6-6.5 6.6-17 .1-23.4zm-31.7 1.4c1.9 0 3.7.6 5.2 1.8l-18.6 18.6h-10.5l17.9-17.9c1.5-1.7 3.7-2.5 6-2.5zm-26.2.7c3.1-3.1 7.9-3.3 11.2-.7l-20.4 20.4H151l19.6-19.7zm52.3 15.6l-27.5 27.5-2.8 2.9c-1.1 1.2-2.6 1.8-4.2 1.8h-54.9-.1c-3.7.1-7.2 1.6-9.7 4.2l-51.8 51.8H13.7l74.4-74.4c2.7-2.7 3.8-5 4.2-5.9l3.8-7.6c.6-1 2.3-3.7 3.8-5.2L119 10.5c1.6-1.6 3.8-2.5 6-2.5 2.3 0 4.4.9 6 2.5 1.6 1.6 2.5 3.8 2.5 6 0 2.3-.9 4.4-2.5 6-.7.7-1.6 1.3-2.9 1.9-1.4.6-2.4 1.6-2.8 2.1-2.2 2.2-3.4 5.2-3.4 8.3 0 3.1 1.2 6.1 3.4 8.3.8.9 3.4 3.1 9.1 3.5H185c1.1 0 2.1-.4 2.8-1.2l22.4-22.3.6-.6c3.3-3.3 8.8-3.3 12.1 0 3.3 3.5 3.3 8.9 0 12.2z"/>
          </svg>
          <svg class="financial-support__coin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.5 96.5" xml:space="preserve">
             <path d="M41.7 64.7H45V68h6.6v-3.3h3.3c3.6 0 6.6-2.9 6.6-6.6v-6.6c0-3.6-2.9-6.6-6.6-6.6H41.7v-6.6h13.2v3.3h6.6v-3.3c0-3.6-2.9-6.6-6.6-6.6h-3.3v-3.3H45v3.3h-3.3c-3.6 0-6.6 2.9-6.6 6.6V45c0 3.6 2.9 6.6 6.6 6.6h13.2v6.6H41.7v-3.3h-6.6v3.3c0 3.6 3 6.5 6.6 6.5z"/>
             <path d="M48.3 96.5C21.6 96.5 0 74.9 0 48.3S21.6 0 48.3 0s48.3 21.6 48.3 48.3-21.7 48.2-48.3 48.2zm0-88.5C26.1 8 8 26.1 8 48.3s18.1 40.3 40.3 40.3 40.3-18.1 40.3-40.3S70.5 8 48.3 8z"/>
             <path d="M21.8 51h-3.1c-.7 0-1.2-.5-1.2-1.2v-3.1c0-.7.5-1.2 1.2-1.2h3.1c.7 0 1.2.5 1.2 1.2v3.1c0 .6-.5 1.2-1.2 1.2zM76.5 51h-3.1c-.7 0-1.2-.5-1.2-1.2v-3.1c0-.7.5-1.2 1.2-1.2h3.1c.7 0 1.2.5 1.2 1.2v3.1c0 .6-.5 1.2-1.2 1.2z"/>
          </svg>
       </div>
       <div class="service-card__content">
          <strong class="service-card__title">Financial help</strong>
          <div class="service-card__body">
             <div class="wysiwyg">Nunc scelerisque tincidunt elit. Vestibulum non mi ipsum.</div>
          </div>
       </div>
    </div>
 </div>
 <div class="col-6 col-sm-4 col-md-3 col-xl-2">
  <!-- Specialist Support -->
  <div class="service-card">
     <div class="service-card__media">
        <svg class="specialist-support__person" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184.4 215.9">
           <path d="M173.3 67.9h-.3v-.4c0-18.4-8.1-35.6-22.8-48.4C136.4 7 117.7 0 99 0H86.6C41.9 0 10.7 27.8 10.7 67.5v.4C4.8 68.1 0 73 0 79v29.5c0 6.1 5 11.1 11.1 11.1h2.2v7.2c0 2.2 1.8 4 4 4h31.3c1.6 1.3 3.2 2.6 4.9 3.8-17.1 3.9-29.2 18.2-33.2 39.8L17 215.9h151.8l-5.5-39.3v-.2c-4.5-24.2-16.2-38.9-33.5-42.2 12.5-9.1 21.4-22.4 25.1-37.4v11.7c0 6.1 5 11.1 11.1 11.1h7.3c6.1 0 11.1-5 11.1-11.1V79c0-6.1-5-11.1-11.1-11.1zM8 108.5V79c0-1.7 1.4-3.1 3.1-3.1h7.3c1.7 0 3.1 1.4 3.1 3.1v29.5c0 1.7-1.4 3.1-3.1 3.1h-7.3c-1.7 0-3.1-1.4-3.1-3.1zm13.3 10.7c4.7-1.3 8.2-5.6 8.2-10.7v-5.9c2.5 7.4 6.4 14.2 11.3 20.2H21.3v-3.6zm67.3-95.1c-.5 4.6-2.8 13-11.7 24.1-11 13.7-31.9 21.6-42.3 24.9 3.9-26.8 26.5-47.7 54-49zm66.8 153.6l4.2 30.1H25.7l2.6-32.2c4.1-21.7 16.9-34.1 35.2-34.1H66c.4.2.8.3 1.2.5l1.5.6c.5.2 1.1.4 1.6.6.5.2 1 .3 1.5.5.6.2 1.1.3 1.7.5.5.1 1 .3 1.5.4.6.1 1.2.3 1.7.4l1.5.3 1.8.3c.5.1 1 .2 1.4.3.6.1 1.3.2 1.9.3.4.1.9.1 1.3.2.7.1 1.5.1 2.2.2.4 0 .7.1 1.1.1 1.1.1 2.2.1 3.3.1 1.1 0 2.2 0 3.3-.1.4 0 .8-.1 1.1-.1.7 0 1.5-.1 2.2-.2.5 0 .9-.1 1.4-.2.6-.1 1.3-.2 1.9-.2.5-.1 1-.2 1.4-.3l1.8-.3 1.5-.3c.6-.1 1.2-.3 1.7-.4.5-.1 1-.3 1.5-.4.6-.2 1.1-.3 1.7-.5.5-.2 1-.3 1.5-.5s1.1-.4 1.6-.6l1.5-.6c.4-.2.8-.3 1.2-.5h5.3c12.4-.1 28.1 6.2 33.6 36.1zm-41-43.8c-7.3 3.2-15 4.8-23 4.8s-15.7-1.6-23-4.8c-2.1-.9-4.1-1.9-6-3.1H81c2.2 0 4-1.8 4-4s-1.8-4-4-4H51.8c-11-10.6-17.6-25.3-17.7-41.1 9.8-2.8 35.5-11.5 49.1-28.5 4.9-6.1 8.1-11.6 10.1-16.3 2.1 4.6 5.3 9.7 9.8 14.5 12 12.7 36.1 13.7 43.3 13.7 1.5 5.2 2.4 10.6 2.4 16.2-.1 22.8-13.6 43.4-34.4 52.6zm-17-109.6c20.3 2.1 37.5 14.9 45.9 32.7-2.8-.1-6.6-.4-10.7-1-7.6-1.2-17.8-3.9-23.7-10.1-7.4-7.7-10.3-16.3-11.5-21.6zm58.8 49.3C152.4 41.2 124.8 16 91.4 16c-32.7 0-59.9 24.2-64.6 55.6-2-2.2-4.9-3.7-8.1-3.7v-.4c0-16.7 6.5-31.8 18.3-42.5C49.3 13.9 66.5 8 86.6 8H99c16.8 0 33.6 6.2 46.1 17.1 12.9 11.3 20 26.3 20 42.4v.4c-3.8.3-7.1 2.5-8.9 5.7zm20.2 34.9c0 1.7-1.4 3.1-3.1 3.1H166c-1.7 0-3.1-1.4-3.1-3.1V79c0-1.7 1.4-3.1 3.1-3.1h7.3c1.7 0 3.1 1.4 3.1 3.1v29.5z"/>
        </svg>
        <svg class="specialist-support__bubble" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.4 97.2">
           <path d="M96.4 43.3C96.4 19.4 74.8 0 48.2 0S0 19.4 0 43.3s21.6 43.3 48.2 43.3c5.1 0 10.1-.7 15-2.1.4-.1.8 0 1 .2l14 11.7c.7.6 1.6.9 2.6.9.6 0 1.2-.1 1.8-.4 1.4-.7 2.3-2.2 2.2-3.8l-1.4-19.5c0-.3.1-.6.3-.9 8.2-8.1 12.7-18.5 12.7-29.4zM78.1 66.8c-1.9 1.9-2.9 4.5-2.7 7.1l.7 10.2-6.8-5.6c-1.7-1.4-3.7-2.1-5.8-2.1-.9 0-1.7.1-2.6.4-4.1 1.2-8.4 1.8-12.7 1.8C26 78.6 8 62.7 8 43.3S26 8 48.2 8s40.2 15.8 40.2 35.3c0 8.7-3.6 17-10.3 23.5z"/>
           <path class="specialist-support__bubble__line-1" d="M69.2,32.7h-42c-2.2,0-4,1.8-4,4s1.8,4,4,4h42c2.2,0,4-1.8,4-4S71.4,32.7,69.2,32.7z"/>
           <path class="specialist-support__bubble__line-2" d="M69.2,49H42.4c-2.2,0-4,1.8-4,4s1.8,4,4,4h26.8c2.2,0,4-1.8,4-4S71.4,49,69.2,49z"/>
        </svg>
     </div>
     <div class="service-card__content">
        <strong class="service-card__title">Specialist support</strong>
        <div class="service-card__body">
           <div class="wysiwyg">Aliquam faucibus, odio nec commodo aliquam</div>
        </div>
     </div>
  </div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-xl-2">
  <!-- Talk To Someone -->
  <div class="service-card">
     <div class="service-card__media">
        <svg class="talk-to-someone__person-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.4 145.6">
           <path d="M110.4 141l-3.5-24.9v-.2c-3.1-16.8-11-27.3-22.6-30.6 11.1-9 17.9-22.6 17.9-37.4 0-26.5-21.5-48-48-48s-48 21.5-48 48c0 14.9 6.9 28.7 18.3 37.7C13.1 89.3 5 99.5 2.2 114.5c0 .1 0 .3-.1.4L0 141.3c-.1 1.1.3 2.2 1 3 .8.8 1.8 1.3 2.9 1.3h102.4c1.2 0 2.3-.5 3-1.4.9-.9 1.3-2 1.1-3.2zM14.2 48c0-22 17.9-40 40-40s40 17.9 40 40c0 15.9-9.4 30.2-23.9 36.6-5.1 2.2-10.5 3.4-16.1 3.4-5.6 0-11-1.1-16.1-3.4C23.6 78.2 14.2 63.9 14.2 48zm-5.9 89.6l1.8-21.8c3.8-20.4 16.7-23.5 24.1-23.5h1.5c.3.1.5.2.8.3.4.1.7.3 1.1.4.4.2.8.3 1.2.4.4.1.7.2 1.1.4.4.1.8.2 1.3.4.4.1.7.2 1.1.3.4.1.9.2 1.3.3.3.1.7.2 1 .2.5.1.9.2 1.4.2.3.1.7.1 1 .2.5.1 1 .1 1.4.2.3 0 .6.1 1 .1.5.1 1.1.1 1.6.1.3 0 .5 0 .8.1.8 0 1.6.1 2.4.1.8 0 1.6 0 2.4-.1.3 0 .5 0 .8-.1.5 0 1.1-.1 1.6-.1.3 0 .6-.1.9-.1.5-.1 1-.1 1.5-.2.3-.1.7-.1 1-.2.5-.1.9-.2 1.4-.3.3-.1.7-.2 1-.2.4-.1.9-.2 1.3-.3.4-.1.7-.2 1.1-.3.4-.1.9-.2 1.3-.4.4-.1.7-.2 1.1-.4.4-.1.8-.3 1.2-.4.4-.1.7-.3 1.1-.4.3-.1.5-.2.8-.3h3.6c15 0 20.6 13.6 22.8 25l2.8 20.3H8.3z"/>
        </svg>
        <svg class="talk-to-someone__person-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.4 145.6">
           <path d="M110.4 141l-3.5-24.9v-.2c-3.1-16.8-11-27.3-22.6-30.6 11.1-9 17.9-22.6 17.9-37.4 0-26.5-21.5-48-48-48s-48 21.5-48 48c0 14.9 6.9 28.7 18.3 37.7C13.1 89.3 5 99.5 2.2 114.5c0 .1 0 .3-.1.4L0 141.3c-.1 1.1.3 2.2 1 3 .8.8 1.8 1.3 2.9 1.3h102.4c1.2 0 2.3-.5 3-1.4.9-.9 1.3-2 1.1-3.2zM14.2 48c0-22 17.9-40 40-40s40 17.9 40 40c0 15.9-9.4 30.2-23.9 36.6-5.1 2.2-10.5 3.4-16.1 3.4-5.6 0-11-1.1-16.1-3.4C23.6 78.2 14.2 63.9 14.2 48zm-5.9 89.6l1.8-21.8c3.8-20.4 16.7-23.5 24.1-23.5h1.5c.3.1.5.2.8.3.4.1.7.3 1.1.4.4.2.8.3 1.2.4.4.1.7.2 1.1.4.4.1.8.2 1.3.4.4.1.7.2 1.1.3.4.1.9.2 1.3.3.3.1.7.2 1 .2.5.1.9.2 1.4.2.3.1.7.1 1 .2.5.1 1 .1 1.4.2.3 0 .6.1 1 .1.5.1 1.1.1 1.6.1.3 0 .5 0 .8.1.8 0 1.6.1 2.4.1.8 0 1.6 0 2.4-.1.3 0 .5 0 .8-.1.5 0 1.1-.1 1.6-.1.3 0 .6-.1.9-.1.5-.1 1-.1 1.5-.2.3-.1.7-.1 1-.2.5-.1.9-.2 1.4-.3.3-.1.7-.2 1-.2.4-.1.9-.2 1.3-.3.4-.1.7-.2 1.1-.3.4-.1.9-.2 1.3-.4.4-.1.7-.2 1.1-.4.4-.1.8-.3 1.2-.4.4-.1.7-.3 1.1-.4.3-.1.5-.2.8-.3h3.6c15 0 20.6 13.6 22.8 25l2.8 20.3H8.3z"/>
        </svg>
        <svg class="talk-to-someone__bubble" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.4 97.2">
           <path d="M96.4 43.3C96.4 19.4 74.8 0 48.2 0S0 19.4 0 43.3s21.6 43.3 48.2 43.3c5.1 0 10.1-.7 15-2.1.4-.1.8 0 1 .2l14 11.7c.7.6 1.6.9 2.6.9.6 0 1.2-.1 1.8-.4 1.4-.7 2.3-2.2 2.2-3.8l-1.4-19.5c0-.3.1-.6.3-.9 8.2-8.1 12.7-18.5 12.7-29.4zM78.1 66.8c-1.9 1.9-2.9 4.5-2.7 7.1l.7 10.2-6.8-5.6c-1.7-1.4-3.7-2.1-5.8-2.1-.9 0-1.7.1-2.6.4-4.1 1.2-8.4 1.8-12.7 1.8C26 78.6 8 62.7 8 43.3S26 8 48.2 8s40.2 15.8 40.2 35.3c0 8.7-3.6 17-10.3 23.5z"/>
           <path class="talk-to-someone__bubble__line-1" d="M69.2,32.7h-42c-2.2,0-4,1.8-4,4s1.8,4,4,4h42c2.2,0,4-1.8,4-4S71.4,32.7,69.2,32.7z"/>
           <path class="talk-to-someone__bubble__line-2" d="M69.2,49H42.4c-2.2,0-4,1.8-4,4s1.8,4,4,4h26.8c2.2,0,4-1.8,4-4S71.4,49,69.2,49z"/>
        </svg>
     </div>
     <div class="service-card__content">
        <strong class="service-card__title">Talk to someone who’s been there</strong>
        <div class="service-card__body">
           <div class="wysiwyg">Phasellus dignissim ellus in</div>
        </div>
     </div>
  </div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-xl-2">
  <!-- Support Group -->
  <div class="service-card">
     <div class="service-card__media">
        <svg class="support-group__hand" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.4 130.8">
           <path d="M228.5 17c-5.6-5.6-14.2-6.3-20.6-2.2-5.6-5.1-13.9-5.7-20.1-1.8-6.5-5.9-16.6-5.8-22.9.5l-25.3 25.3h-4.8c-2.2-.2-3.2-.7-3.6-.9h-.1l-.1-.1c-.7-.7-1.1-1.7-1.1-2.8s.4-2 1.1-2.8l.2-.2.2-.2c2.1-1 3.8-2.1 5.2-3.5 3.1-3.1 4.8-7.3 4.8-11.7 0-4.4-1.7-8.6-4.8-11.7-3-3.2-7.1-4.9-11.6-4.9-4.4 0-8.6 1.7-11.7 4.8L94.1 24.1c-2.6 2.6-4.9 6.5-5.1 7 0 .1-.1.1-.1.2L85 39.1c-.1.2-.1.3-.2.5-.1.3-.7 1.5-2.4 3.2L1.2 124c-1.1 1.1-1.5 2.9-.9 4.4.6 1.5 2.1 2.5 3.7 2.5h69.4c1.1 0 2.1-.4 2.8-1.2l53-53c1.1-1.2 2.6-1.8 4.2-1.8h54.8c3.8 0 7.3-1.5 9.9-4.2l30.3-30.3c6.6-6.5 6.6-17 .1-23.4zm-31.7 1.4c1.9 0 3.7.6 5.2 1.8l-18.6 18.6h-10.5l17.9-17.9c1.5-1.7 3.7-2.5 6-2.5zm-26.2.7c3.1-3.1 7.9-3.3 11.2-.7l-20.4 20.4H151l19.6-19.7zm52.3 15.6l-27.5 27.5-2.8 2.9c-1.1 1.2-2.6 1.8-4.2 1.8h-54.9-.1c-3.7.1-7.2 1.6-9.7 4.2l-51.8 51.8H13.7l74.4-74.4c2.7-2.7 3.8-5 4.2-5.9l3.8-7.6c.6-1 2.3-3.7 3.8-5.2L119 10.5c1.6-1.6 3.8-2.5 6-2.5 2.3 0 4.4.9 6 2.5 1.6 1.6 2.5 3.8 2.5 6 0 2.3-.9 4.4-2.5 6-.7.7-1.6 1.3-2.9 1.9-1.4.6-2.4 1.6-2.8 2.1-2.2 2.2-3.4 5.2-3.4 8.3 0 3.1 1.2 6.1 3.4 8.3.8.9 3.4 3.1 9.1 3.5H185c1.1 0 2.1-.4 2.8-1.2l22.4-22.3.6-.6c3.3-3.3 8.8-3.3 12.1 0 3.3 3.5 3.3 8.9 0 12.2z"/>
        </svg>
        <svg class="support-group__heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89.7 80.6" xml:space="preserve">
           <path id="Tracé_4105_2_" d="M82.5 7.6c-8.9-9.4-23.7-9.8-33.1-.9l-.9.9-3.6 3.7-3.6-3.8C36.9 2.9 30.7.2 24.3.2h-.1c-6.4 0-12.5 2.6-17 7.3-9.3 9.9-9.3 25.2 0 35.1L42 79.1c.7.8 1.7 1.2 2.7 1.2h.1c1 0 1.9-.4 2.7-1.1l.2-.2 34.8-36.5c9.3-9.7 9.3-25.1 0-34.9zm-5.7 29.7c-10.6 11.2-21.3 22.3-32 33.4l-32-33.5c-6.4-6.8-6.4-17.5 0-24.3 2.8-3 6.7-4.8 10.8-5h.5c4.3 0 8.4 1.9 11.4 5l6.4 6.7c.7.8 1.7 1.2 2.7 1.2 1 0 2-.4 2.8-1.1l.2-.2 6.4-6.7c5.7-6.3 15.4-6.7 21.7-1 .4.3.7.6 1 1 6.5 7 6.5 17.6.1 24.5z"/>
           <path d="M44.8 80.6h-.1c-1.1 0-2.2-.5-2.9-1.3L7 42.8c-9.3-9.9-9.3-25.5 0-35.4C11.5 2.7 17.7 0 24.2 0h.1C30.7 0 37 2.7 41.4 7.4l3.4 3.6 3.4-3.6.9-.9c9.5-9 24.5-8.5 33.5.9 9.4 9.9 9.4 25.5 0 35.4l-35 36.6c-.7.8-1.7 1.2-2.8 1.2zM24.2.5C17.9.5 11.8 3.1 7.4 7.7c-9.2 9.7-9.2 25 0 34.7l34.8 36.5c.7.7 1.6 1.1 2.5 1.2h.1c.9 0 1.8-.3 2.5-1l.2-.2 34.8-36.5c9.2-9.7 9.2-25 0-34.7-8.8-9.3-23.5-9.7-32.8-.9l-.9.9-3.8 3.9-3.8-4C36.7 3.2 30.6.5 24.2.5zm20.7 70.6l-.2-.2-32-33.5c-6.5-6.9-6.5-17.7 0-24.6 2.9-3.1 6.8-4.9 11-5.1h.5c4.4.1 8.6 1.9 11.6 5.1l6.4 6.7c.7.7 1.6 1.1 2.5 1.2 1 0 1.9-.3 2.6-1l.1-.1 6.4-6.7c5.8-6.3 15.7-6.8 22.1-1 .3.3.7.6 1 1 6.4 6.9 6.5 17.6.1 24.6v-.1C66.4 48.6 55.7 59.7 45 70.9l-.1.2zM24.2 8.2h-.5c-4.1.2-7.8 1.9-10.6 4.9-6.3 6.7-6.3 17.2 0 24l31.8 33.3C55.4 59.3 66 48.2 76.6 37.2l.1-.1c6.3-6.7 6.3-17.2 0-23.9-.3-.4-.7-.7-1-1-6.2-5.6-15.7-5.2-21.4 1l-6.4 6.7-.1.1c-.8.8-1.9 1.1-3 1.1s-2.2-.5-2.9-1.3l-6.4-6.7c-3-3-7-4.9-11.3-4.9z"/>
        </svg>
     </div>
     <div class="service-card__content">
        <strong class="service-card__title">Support groups</strong>
        <div class="service-card__body">
           <div class="wysiwyg">Nunc scelerisque tincidunt elit. Vestibulum non mi ipsum.</div>
        </div>
     </div>
  </div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-xl-2">
  <!-- Support Group 2 -->
  <div class="service-card">
     <div class="service-card__media">
        <svg class="support-group-2__hands" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.5 240.4">
           <path d="M228.5 16.5C228.5 7.4 221.1 0 212 0c-7.9 0-14.5 5.6-16.2 13-7.6.3-13.8 5.8-15.4 12.9-8.8.4-15.8 7.6-15.8 16.5v35.8l-3.4 3.4c-1.7 1.4-2.8 1.8-3.2 1.9h-.2c-2.1 0-3.9-1.7-3.9-3.9V79c.8-2.2 1.2-4.2 1.2-6.1 0-9.1-7.4-16.5-16.5-16.5s-16.5 7.4-16.5 16.5v27.2c0 3.7 1.2 8.1 1.3 8.6 0 .1 0 .1.1.2l2.8 8.3c.1.2.1.3.2.5.1.3.6 1.6.6 3.9v114.9a4.025 4.025 0 004 4c1 0 2.1-.4 2.8-1.2l49.1-49.1c.8-.8 1.2-1.8 1.2-2.8v-74.9c0-1.6.6-3.1 1.7-4.2l38.8-38.8c2.7-2.7 4.1-6.2 4.1-10l-.3-43zm-40.5 13c0-4.3 3.2-7.9 7.4-8.5v26.3l-7.4 7.4V29.5zm-15.4 12.9c0-4.3 3.2-7.9 7.4-8.5v28.8l-7.4 7.4V42.4zm46.2 21.3L180 102.6l-.1.1c-2.6 2.7-4 6.2-3.9 9.8v73.2l-41.1 41.1V121.5c0-3.8-.8-6.2-1.2-7.1l-2.7-8c-.3-1.1-1-4.2-1-6.3V72.9c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5c0 1-.2 2.1-.7 3.4-.5 1.4-.5 2.8-.5 3.5.1 6.4 5.3 11.7 11.8 11.7 1.2.1 4.6-.2 8.9-4l.2-.2 20.1-20.1 15.4-15.4c.8-.8 1.2-1.8 1.2-2.8V16.5c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v42.9c.2 1.7-.4 3.2-1.6 4.3zM90 56.3c-9.1 0-16.5 7.4-16.5 16.5 0 1.9.4 4 1.2 6.1v.7c0 2.1-1.7 3.9-3.9 3.9h-.2c-.4-.1-1.5-.5-3.2-1.9L64 78.2V42.4c0-8.9-7-16.1-15.8-16.5-1.6-7.2-7.9-12.6-15.4-12.9-1.7-7.4-8.3-13-16.2-13C7.4 0 0 7.4 0 16.5v42.8c-.1 3.8 1.4 7.4 4.1 10l38.8 38.8c1.1 1.1 1.7 2.6 1.7 4.3v74.9c0 1.1.4 2.1 1.2 2.8l49.1 49.1c.8.8 1.8 1.2 2.8 1.2a4.025 4.025 0 004-4V121.5c0-2.3.5-3.6.6-3.9.1-.2.1-.3.2-.5l2.8-8.3c0-.1 0-.1.1-.2.1-.5 1.3-4.9 1.3-8.6V72.9c-.1-9.2-7.6-16.6-16.7-16.6zM56 42.4v27.8l-7.4-7.4V34c4.1.5 7.4 4.1 7.4 8.4zM40.5 29.5v25.3l-7.4-7.4V21c4.2.6 7.4 4.2 7.4 8.5zm58.1 70.6c0 2.1-.7 5.2-1 6.3l-2.7 8c-.4.9-1.2 3.3-1.2 7.1v105.2l-41.1-41.1v-73.1c.1-3.7-1.3-7.2-3.9-9.9l-.1-.1L9.7 63.7C8.6 62.6 8 61.1 8 59.4V16.5C8 11.8 11.8 8 16.6 8s8.5 3.8 8.5 8.5V49c0 1.1.4 2.1 1.2 2.8l15.4 15.4 15.4 15.4 4.6 4.6.2.2c4.3 3.7 7.7 4 8.9 4 6.5-.1 11.7-5.3 11.8-11.7 0-.6 0-2-.5-3.5-.5-1.3-.7-2.4-.7-3.4 0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5v27.3z"/>
        </svg>
        <svg class="support-group-2__heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89.7 80.6" xml:space="preserve">
           <path id="Tracé_4105_2_" d="M82.5 7.6c-8.9-9.4-23.7-9.8-33.1-.9l-.9.9-3.6 3.7-3.6-3.8C36.9 2.9 30.7.2 24.3.2h-.1c-6.4 0-12.5 2.6-17 7.3-9.3 9.9-9.3 25.2 0 35.1L42 79.1c.7.8 1.7 1.2 2.7 1.2h.1c1 0 1.9-.4 2.7-1.1l.2-.2 34.8-36.5c9.3-9.7 9.3-25.1 0-34.9zm-5.7 29.7c-10.6 11.2-21.3 22.3-32 33.4l-32-33.5c-6.4-6.8-6.4-17.5 0-24.3 2.8-3 6.7-4.8 10.8-5h.5c4.3 0 8.4 1.9 11.4 5l6.4 6.7c.7.8 1.7 1.2 2.7 1.2 1 0 2-.4 2.8-1.1l.2-.2 6.4-6.7c5.7-6.3 15.4-6.7 21.7-1 .4.3.7.6 1 1 6.5 7 6.5 17.6.1 24.5z"/>
           <path d="M44.8 80.6h-.1c-1.1 0-2.2-.5-2.9-1.3L7 42.8c-9.3-9.9-9.3-25.5 0-35.4C11.5 2.7 17.7 0 24.2 0h.1C30.7 0 37 2.7 41.4 7.4l3.4 3.6 3.4-3.6.9-.9c9.5-9 24.5-8.5 33.5.9 9.4 9.9 9.4 25.5 0 35.4l-35 36.6c-.7.8-1.7 1.2-2.8 1.2zM24.2.5C17.9.5 11.8 3.1 7.4 7.7c-9.2 9.7-9.2 25 0 34.7l34.8 36.5c.7.7 1.6 1.1 2.5 1.2h.1c.9 0 1.8-.3 2.5-1l.2-.2 34.8-36.5c9.2-9.7 9.2-25 0-34.7-8.8-9.3-23.5-9.7-32.8-.9l-.9.9-3.8 3.9-3.8-4C36.7 3.2 30.6.5 24.2.5zm20.7 70.6l-.2-.2-32-33.5c-6.5-6.9-6.5-17.7 0-24.6 2.9-3.1 6.8-4.9 11-5.1h.5c4.4.1 8.6 1.9 11.6 5.1l6.4 6.7c.7.7 1.6 1.1 2.5 1.2 1 0 1.9-.3 2.6-1l.1-.1 6.4-6.7c5.8-6.3 15.7-6.8 22.1-1 .3.3.7.6 1 1 6.4 6.9 6.5 17.6.1 24.6v-.1C66.4 48.6 55.7 59.7 45 70.9l-.1.2zM24.2 8.2h-.5c-4.1.2-7.8 1.9-10.6 4.9-6.3 6.7-6.3 17.2 0 24l31.8 33.3C55.4 59.3 66 48.2 76.6 37.2l.1-.1c6.3-6.7 6.3-17.2 0-23.9-.3-.4-.7-.7-1-1-6.2-5.6-15.7-5.2-21.4 1l-6.4 6.7-.1.1c-.8.8-1.9 1.1-3 1.1s-2.2-.5-2.9-1.3l-6.4-6.7c-3-3-7-4.9-11.3-4.9z"/>
        </svg>
     </div>
     <div class="service-card__content">
        <strong class="service-card__title">Support groups</strong>
        <div class="service-card__body">
           <div class="wysiwyg">Nunc scelerisque tincidunt elit. Vestibulum non mi ipsum.</div>
        </div>
     </div>
  </div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-xl-2">
  <!-- Service Locator -->
  <div class="service-card">
     <div class="service-card__media">
        <svg class="service-locator__map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.3 75.6">
           <path d="M250.3 75.6H4c-1.3 0-2.4-.6-3.2-1.6-.8-1-1-2.3-.6-3.5l20-67.6c.5-1.7 2-2.9 3.8-2.9h206.3c1.8 0 3.3 1.2 3.8 2.9l20 67.6c.4 1.2.1 2.5-.6 3.5-.8 1-2 1.6-3.2 1.6zm-240.9-8H245L227.3 8H27L9.4 67.6z"/>
           <path d="M162.7 41.7H91.9c-2.2 0-4-1.8-4-4s1.8-4 4-4h70.8c2.2 0 4 1.8 4 4s-1.8 4-4 4z"/>
        </svg>
        <svg class="service-locator__pin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.2 138">
           <path class="filler" d="M13.3 75.3h69.8l-36 57.9z"/>
           <path d="M47.1 138c-1.4 0-2.8-.8-3.5-2l-37-64.5c-11.2-19.4-7.8-44.2 8.1-58.9C23.5 4.5 35 0 47.1 0c12.1 0 23.6 4.5 32.5 12.7 15.9 14.7 19.3 39.4 8.1 58.9L50.6 136c-.7 1.2-2.1 2-3.5 2zm0-130c-10.1 0-19.7 3.7-27 10.5C7 30.7 4.2 51.3 13.5 67.5L47.1 126l33.6-58.4c9.3-16.2 6.6-36.8-6.6-49C66.8 11.7 57.2 8 47.1 8zm0 64.6c-14 0-25.3-11.4-25.3-25.3 0-14 11.4-25.3 25.3-25.3 14 0 25.3 11.4 25.3 25.3S61.1 72.6 47.1 72.6zm0-42.7c-9.6 0-17.3 7.8-17.3 17.3 0 9.6 7.8 17.3 17.3 17.3 9.6 0 17.3-7.8 17.3-17.3s-7.7-17.3-17.3-17.3z"/>
           <path d="M47.1 72.6c-14 0-25.3-11.4-25.3-25.3 0-14 11.4-25.3 25.3-25.3 14 0 25.3 11.4 25.3 25.3S61.1 72.6 47.1 72.6zm0-42.7c-9.6 0-17.3 7.8-17.3 17.3 0 9.6 7.8 17.3 17.3 17.3 9.6 0 17.3-7.8 17.3-17.3s-7.7-17.3-17.3-17.3z"/>
        </svg>
     </div>
     <div class="service-card__content">
        <strong class="service-card__title">Community service Locator</strong>
        <div class="service-card__body">
           <div class="wysiwyg">Aliquam faucibus, odio nec commodo</div>
        </div>
     </div>
  </div>
</div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Pratical Support -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="practical-support__jar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.4 203.9">
                 <path d="M19.5 73.8c-2.2 0-4-1.7-4-3.9-.3-12.7 9.2-26.3 9.6-26.9 1.3-1.8 3.8-2.2 5.6-1 1.8 1.3 2.2 3.8 1 5.6-.1.2-8.4 12.1-8.2 22.1 0 2.2-1.7 4-4 4.1z"/>
                 <path d="M121.1 34.3s9-5.8 9-13V13c0-7.2-5.8-13-13-13H17.3c-7.2 0-13 5.8-13 13v8.4c0 7.2 9 13 9 13C5.1 44.7 0 59 0 70v108.9c0 10.3 7.8 18.8 17.8 19.9 2.7.8 6 1.6 9.9 2.3 10.6 1.8 24.6 2.8 39.5 2.8s28.9-1 39.5-2.8c3.9-.7 7.1-1.4 9.8-2.2 10.1-1.1 17.9-9.6 17.9-20V70c0-11-5.1-25.3-13.3-35.7zM12.3 21.4V13c0-2.7 2.2-5 5-5h99.9c2.7 0 5 2.2 5 5v8.4c0 2.7-2.2 5-5 5H17.3c-2.8-.1-5-2.3-5-5zm54.9 174.5c-24.6 0-40.8-2.7-47.7-5-.5-.2-.9-.3-1.3-.5 5.9-2.3 22.3-5.4 49.1-5.4s43.2 3 49.1 5.4c-6.1 2.4-22.8 5.5-49.2 5.5zm59.2-17c0 2.7-.9 5.1-2.3 7.1-2.7-2.6-8.3-4.6-17.4-6.1-10.6-1.8-24.6-2.8-39.5-2.8s-28.9 1-39.5 2.8c-9.1 1.6-14.6 3.5-17.4 6.1-1.5-2-2.3-4.5-2.3-7.1V70c0-8.2 3.5-18.8 8.9-27.1 2.3-3.5 4.7-6.3 7.3-8.6h86.2c9.4 8.3 16.1 24.4 16.1 35.7v108.9z"/>
              </svg>
              <svg class="practical-support__heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.8 60">
                 <path d="M61.6 5.5c-6.7-7-17.8-7.4-24.8-.7l-.7.7-2.7 2.8-2.7-2.8C27.4 2 22.8 0 18 0h-.1C13.1 0 8.5 2 5.2 5.5c-6.9 7.4-6.9 18.9 0 26.3l26.1 27.3c.5.6 1.3.9 2 .9h.1c.7 0 1.5-.3 2-.8l.1-.1 26.1-27.3c7-7.4 7-18.9 0-26.3zm-4.2 22.2c-8 8.4-16 16.7-24 25.1l-24-25.1c-4.8-5.1-4.8-13.1 0-18.2 2.1-2.3 5-3.6 8.1-3.7h.5c3.2 0 6.3 1.4 8.5 3.8l4.8 5c.5.6 1.3.9 2 .9.8 0 1.5-.3 2.1-.8l.1-.1 4.8-5c4.3-4.7 11.6-5 16.3-.7.3.2.5.5.7.7 4.9 5 4.9 13 .1 18.1z"/>
              </svg>
           </div>
           <div class="service-card__content">
              <strong class="service-card__title">Supportive care</strong>
              <div class="service-card__body">
                 <div class="wysiwyg">Phasellus dignissim ellus in</div>
              </div>
           </div>
        </div>
     </div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Look Good -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="look-good__person" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168.3 223.2">
                 <path d="M168.2 218.7l-5.4-39v-.2c-5.1-27.5-18.6-43.9-38.4-47.1 19.2-13.5 31-35.6 31-59.6C155.4 32.7 122.7 0 82.6 0S9.7 32.7 9.7 72.8c0 24.3 12.1 46.6 31.6 60-19.5 4-33.4 20-37.9 44.5 0 .1 0 .3-.1.4L0 218.9c-.1 1.1.3 2.2 1 3 .8.8 1.8 1.3 2.9 1.3h160.3c1.2 0 2.3-.5 3-1.4.8-.8 1.2-2 1-3.1zM17.7 72.8C17.7 37.1 46.8 8 82.6 8s64.8 29.1 64.8 64.8c0 25.7-15.2 49-38.8 59.4-8.2 3.6-17 5.5-26 5.5s-17.8-1.8-26-5.5C33 121.8 17.7 98.5 17.7 72.8zM8.3 215.2l3-36.7c4.6-24.6 19.1-38.7 39.9-38.7h2.9c.5.2 1 .4 1.4.6.5.2 1.1.4 1.6.7.6.2 1.2.4 1.9.6.6.2 1.1.4 1.7.6.6.2 1.3.4 1.9.6.6.2 1.1.3 1.7.5.6.2 1.3.3 1.9.5.5.1 1.1.3 1.6.4.7.1 1.4.3 2 .4.5.1 1.1.2 1.6.3.7.1 1.5.2 2.2.3.5.1 1 .1 1.5.2.8.1 1.6.1 2.5.2.4 0 .8.1 1.2.1 1.2.1 2.5.1 3.7.1 1.2 0 2.5 0 3.7-.1.4 0 .8-.1 1.2-.1.8-.1 1.6-.1 2.5-.2.5-.1 1-.1 1.5-.2.7-.1 1.5-.2 2.2-.3.5-.1 1.1-.2 1.6-.3.7-.1 1.4-.2 2-.4.6-.1 1.1-.3 1.6-.4.7-.2 1.3-.3 1.9-.5.6-.1 1.1-.3 1.7-.5.6-.2 1.3-.4 1.9-.6.6-.2 1.1-.4 1.7-.6.6-.2 1.2-.4 1.9-.6.5-.2 1.1-.4 1.6-.6.5-.2 1-.4 1.4-.6h6c13.8 0 31.6 7.1 37.8 41l4.8 34.4H8.3z"/>
              </svg>
              <svg class="look-good__smile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 15">
                 <path class="smile" d="M19.4,14.9c-6.5,0-12.7-2.5-17.3-7.2c-0.8-0.8-0.8-2.1,0-3c0.8-0.8,2.1-0.8,3,0c3.8,3.8,8.9,5.9,14.3,5.9c5.9,0,11.5-2.6,15.4-7.1c0.8-0.9,2.1-1,3-0.2c0.9,0.8,1,2.1,0.2,3C33.3,11.7,26.6,14.9,19.4,14.9z"/>
              </svg>
              <svg class="look-good__star-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.4 43.4">
                 <path d="M21.7 43.4c-1.5 0-2.8-.8-3.5-2.1l-5.7-10.4-10.4-5.7c-1.3-.7-2.1-2-2.1-3.5s.8-2.8 2.1-3.5l10.4-5.7 5.7-10.4c.7-1.3 2-2.1 3.5-2.1s2.8.8 3.5 2.1l5.7 10.4 10.4 5.7c1.3.7 2.1 2 2.1 3.5s-.8 2.8-2.1 3.5l-10.4 5.7-5.7 10.4c-.7 1.3-2 2.1-3.5 2.1zm-9.4-21.7l5 2.7c.7.4 1.2.9 1.6 1.6l2.7 5 2.7-5c.4-.7.9-1.2 1.6-1.6l5-2.7L26 19c-.7-.4-1.2-.9-1.6-1.6l-2.7-5-2.7 5c-.4.6-1 1.2-1.6 1.6l-5.1 2.7z"/>
              </svg>
              <svg class="look-good__star-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.4 43.4">
                 <path d="M21.7 43.4c-1.5 0-2.8-.8-3.5-2.1l-5.7-10.4-10.4-5.7c-1.3-.7-2.1-2-2.1-3.5s.8-2.8 2.1-3.5l10.4-5.7 5.7-10.4c.7-1.3 2-2.1 3.5-2.1s2.8.8 3.5 2.1l5.7 10.4 10.4 5.7c1.3.7 2.1 2 2.1 3.5s-.8 2.8-2.1 3.5l-10.4 5.7-5.7 10.4c-.7 1.3-2 2.1-3.5 2.1zm-9.4-21.7l5 2.7c.7.4 1.2.9 1.6 1.6l2.7 5 2.7-5c.4-.7.9-1.2 1.6-1.6l5-2.7L26 19c-.7-.4-1.2-.9-1.6-1.6l-2.7-5-2.7 5c-.4.6-1 1.2-1.6 1.6l-5.1 2.7z"/>
              </svg>
           </div>
           <div class="service-card__content">
              <strong class="service-card__title">Look good Feel better</strong>
              <div class="service-card__body">
                 <div class="wysiwyg">Nunc scelerisque tincidunt elit. Vestibulum</div>
              </div>
           </div>
        </div>
     </div>
     
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Information Kits -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="information-kits__book" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.7 242.7">
                 <path d="M247.8 174L188.9 17.5c-2.5-6.6-9.9-10-16.6-7.5l-3 1.1-1-2.8c-1.2-3.2-3.6-5.8-6.7-7.2-3.1-1.4-6.6-1.5-9.8-.3L15.5 52.1c-3.2 1.2-5.8 3.6-7.2 6.7s-1.5 6.7-.3 9.9l5.9 15.8-11.3 4.3C.5 89.6-.5 91.9.3 94c.6 1.6 2.1 2.6 3.7 2.6.5 0 .9-.1 1.4-.3L16.8 92l11.5 30.6-10.8 4.1c-2.1.8-3.1 3.1-2.3 5.2.6 1.6 2.1 2.6 3.7 2.6.5 0 .9-.1 1.4-.3l10.8-4.1 11.5 30.6-11.3 4.3c-2.1.8-3.1 3.1-2.3 5.2.6 1.6 2.1 2.6 3.7 2.6.5 0 .9-.1 1.4-.3l11.3-4.3 11.5 30.6-11.3 4.2c-2.1.8-3.1 3.1-2.3 5.2.6 1.6 2.1 2.6 3.7 2.6.5 0 .9-.1 1.4-.3l11.3-4.3 7.2 19.1c1.9 5.1 6.8 8.3 12 8.3 1.5 0 3-.3 4.5-.8l3-1.1 1 2.8c1.9 5.1 6.8 8.3 12 8.3 1.5 0 3-.3 4.5-.8l136.3-51.3c6.8-2.6 10.1-10 7.6-16.7zM80.7 225.2c-1.2.5-2.5.4-3.7-.1-1.2-.5-2.1-1.5-2.5-2.7l-7.2-19.1 10.2-3.8c2.1-.8 3.1-3.1 2.3-5.2-.8-2.1-3.1-3.1-5.2-2.3l-10.2 3.8-11.5-30.6 10.2-3.8c2.1-.8 3.1-3.1 2.3-5.2s-3.1-3.1-5.2-2.3L50 157.7l-11.5-30.6 10.7-4c2.1-.8 3.1-3.1 2.3-5.2s-3.1-3.1-5.2-2.3l-10.7 4-11.4-30.5 10.2-3.8c2.1-.8 3.1-3.1 2.3-5.2-.8-2.1-3.1-3.1-5.2-2.3l-10.2 3.8-5.9-15.8c-.5-1.2-.4-2.5.1-3.7.5-1.2 1.5-2.1 2.7-2.5L154.6 8.3c.6-.2 1.1-.3 1.7-.3.7 0 1.4.1 2 .4 1.2.5 2.1 1.5 2.5 2.7l58.9 156.5c.5 1.2.4 2.5-.1 3.7s-1.5 2.1-2.7 2.5L80.7 225.2zm156.8-42.1l-136.3 51.3c-2.5.9-5.3-.3-6.3-2.8l-1-2.8 125.8-47.4c3.2-1.2 5.8-3.6 7.2-6.7 1.4-3.1 1.5-6.6.3-9.8l-55-146.3 3-1.1c.6-.2 1.1-.3 1.7-.3 2 0 3.8 1.2 4.5 3.1l58.9 156.5c1 2.5-.3 5.4-2.8 6.3z"/>
                 <path d="M146.4 54.2c-.8-2.1-3.1-3.1-5.2-2.3L63.9 81c-2.1.8-3.1 3.1-2.3 5.2.6 1.6 2.1 2.6 3.7 2.6.5 0 .9-.1 1.4-.3l77.4-29.2c2.1-.7 3.1-3 2.3-5.1zM143.2 107.4l-60.8 22.9c-2.1.8-3.1 3.1-2.3 5.2.6 1.6 2.1 2.6 3.7 2.6.5 0 .9-.1 1.4-.3l60.8-22.9c2.1-.8 3.1-3.1 2.3-5.2-.7-2.1-3-3.1-5.1-2.3zM130.2 88.4c-.8-2.1-3.1-3.1-5.2-2.3l-51.9 19.6c-2.1.8-3.1 3.1-2.3 5.2.6 1.6 2.1 2.6 3.7 2.6.5 0 .9-.1 1.4-.3l51.9-19.6c2.2-.8 3.2-3.1 2.4-5.2z"/>
              </svg>
           </div>
           <div class="service-card__content">
              <strong class="service-card__title">Cancer information kits</strong>
              <div class="service-card__body">
                 <div class="wysiwyg">Aliquam faucibus, odio</div>
              </div>
           </div>
        </div>
     </div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Find A Wig -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="find-a-wig__person" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 224">
                 <path d="M181.6,183.7c0-0.1,0-0.1,0-0.2c-4.6-24.9-16.8-40-34.6-43.2c4.6-3.3,8.8-7.2,12.4-11.5c-0.1,5.3-0.5,8.6-0.5,8.7c-0.2,1.5,0.4,2.9,1.7,3.8c0.7,0.5,1.5,0.7,2.3,0.7c0.6,0,1.3-0.1,1.8-0.5c1.4-0.7,33.5-18.1,22.2-77.2c-3.3-17.1-11.7-39.7-33-50.6c-10.2-5.2-19.6-5.7-23.2-5.6c-5.5-3.9-27.3-16.4-64.3,0.4C50.7,15.7,32.1,34,32.1,80.5v0.2c0,17.7-17.3,35.4-18.1,36.2c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0.2-0.1,0.5-0.1,0.7c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.2,0.5c0,0,0,0.1,0,0.1c0.1,0.2,0.2,0.4,0.3,0.5c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.3,0.3,0.4,0.4c0,0,0.1,0.1,0.1,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0,0.1,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.8,0.3,15.7,5.7,36-1.7c4.7,7.4,10.8,13.8,18,18.9c-17.6,3.9-30.1,18.5-34.2,40.8c0,0.1,0,0.3-0.1,0.4l-3,37.7c-0.1,1.1,0.3,2.2,1,3c0.8,0.8,1.8,1.3,2.9,1.3h146.5c1.2,0,2.3-0.5,3-1.4c0.8-0.9,1.1-2,0.9-3.2L181.6,183.7z M32.4,117.6c2.7-1.7,5.7-3.7,9.1-6.4c17.8-13.5,25.6-35,25.9-35.9c0.7-2.1-0.3-4.4-2.4-5.1c-2.1-0.7-4.4,0.3-5.1,2.4c-0.1,0.2-7.3,20.1-23.2,32.2c-2.6,1.9-4.8,3.5-6.8,4.9C35,102,40.1,91.5,40.1,80.7v-0.2c0-33.5,10.2-55.8,29.5-64.6c29.8-13.5,47.8-6.3,54.3-2.5l-7.1,11.1c-1.2,1.9-0.6,4.3,1.2,5.5c0.7,0.4,1.4,0.6,2.1,0.6c1.3,0,2.6-0.7,3.4-1.8l8.1-12.7c8.2,0.1,38.5,3.6,47.3,49.7c7,36.7-3.8,55.2-11.5,63.3c0.4-14.2-1.2-41.5-17-61.4C140,54.6,125.1,47,106.2,45.1c-0.1,0-0.3,0-0.4,0c-1.9,0-3.5,1.3-3.9,3.1c-0.1,0.4-8.4,36.5-35.3,56.3C53.3,114.3,41.2,117.2,32.4,117.6z M58.8,118.6c4-2,8.2-4.5,12.5-7.7c24.5-18,34.6-47.3,37.5-57.4c15,2.2,26.9,8.6,35.3,19.2c10.1,12.8,13.7,29.4,14.8,42.7c-6.2,10.7-15.6,19.4-27.4,24.6c-7.5,3.3-15.4,5-23.7,5s-16.2-1.7-23.7-5C73.7,135.4,65,127.8,58.8,118.6z M40.4,215.9l2.7-33.2c4.2-22.3,17.3-35.1,36.2-35.1h2.6c0.4,0.2,0.9,0.3,1.3,0.5c0.5,0.2,1,0.4,1.5,0.6c0.6,0.2,1.1,0.4,1.7,0.6c0.5,0.2,1,0.4,1.5,0.5c0.6,0.2,1.2,0.3,1.7,0.5c0.5,0.1,1,0.3,1.5,0.4c0.6,0.2,1.2,0.3,1.8,0.4c0.5,0.1,1,0.2,1.5,0.3c0.6,0.1,1.2,0.2,1.9,0.3c0.5,0.1,1,0.2,1.5,0.3c0.7,0.1,1.3,0.2,2,0.3c0.5,0.1,0.9,0.1,1.4,0.2c0.7,0.1,1.5,0.1,2.2,0.2c0.4,0,0.8,0.1,1.1,0.1c1.1,0.1,2.3,0.1,3.4,0.1s2.3,0,3.4-0.1c0.4,0,0.8-0.1,1.2-0.1c0.8-0.1,1.5-0.1,2.2-0.2c0.5,0,0.9-0.1,1.4-0.2c0.7-0.1,1.3-0.2,2-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.3-0.2,1.9-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.2-0.3,1.8-0.4c0.5-0.1,1-0.3,1.5-0.4c0.6-0.2,1.2-0.3,1.7-0.5c0.5-0.2,1-0.3,1.5-0.5c0.6-0.2,1.1-0.4,1.7-0.6c0.5-0.2,1-0.4,1.5-0.6c0.4-0.2,0.9-0.3,1.3-0.5h5.4c12.5,0,28.6,6.5,34.3,37.2l4.3,31H40.4z"/>
              </svg>
           </div>
           <div class="service-card__content">
              <strong class="service-card__title">Find a wig</strong>
              <div class="service-card__body">
                 <div class="wysiwyg">Phasellus dignissim ellus in </div>
              </div>
           </div>
        </div>
     </div>
     <div class="col-6 col-sm-4 col-md-3 col-xl-2">
        <!-- Hospice Palliative -->
        <div class="service-card">
           <div class="service-card__media">
              <svg class="hospice-palliative__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 197.5 197.5">
                 <path d="M98.8 197.5C44.3 197.5 0 153.2 0 98.8S44.3 0 98.8 0s98.8 44.3 98.8 98.8-44.4 98.7-98.8 98.7zM98.8 8C48.7 8 8 48.7 8 98.8s40.7 90.8 90.8 90.8c50 0 90.8-40.7 90.8-90.8S148.8 8 98.8 8z"/>
                 <path d="M114.4 165.7H83.2c-5.7 0-10.3-4.6-10.3-10.3v-30.8H42.1c-5.7 0-10.3-4.6-10.3-10.3V83.2c0-5.7 4.6-10.3 10.3-10.3h30.8V42.1c0-5.7 4.6-10.3 10.3-10.3h31.2c5.7 0 10.3 4.6 10.3 10.3v30.8h30.8c5.7 0 10.3 4.6 10.3 10.3v31.2c0 5.7-4.6 10.3-10.3 10.3h-30.8v30.8c-.1 5.6-4.7 10.2-10.3 10.2zM42.1 80.9c-1.3 0-2.3 1-2.3 2.3v31.2c0 1.3 1 2.3 2.3 2.3h34.8c2.2 0 4 1.8 4 4v34.8c0 1.3 1 2.3 2.3 2.3h31.2c1.3 0 2.3-1 2.3-2.3v-34.8c0-2.2 1.8-4 4-4h34.8c1.3 0 2.3-1 2.3-2.3V83.2c0-1.3-1-2.3-2.3-2.3h-34.8c-2.2 0-4-1.8-4-4V42.1c0-1.3-1-2.3-2.3-2.3H83.2c-1.3 0-2.3 1-2.3 2.3v34.8c0 2.2-1.8 4-4 4H42.1z"/>
              </svg>
           </div>
           <div class="service-card__content">
              <strong class="service-card__title">Hospice palliative care resources</strong>
              <div class="service-card__body">
                 <div class="wysiwyg">Cras pretium suscipit tellus sit amet aliquet</div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>
              
            
!

CSS

              
                :root {
  --primary: #ffd91b;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 10px;
  line-height: 1.3;
}

$grid-gutter-width: 32px;
$duration: 0.3s;

.service-card {
  border-radius: 8px;
  background-color: var(--primary);
  display: flex;
  flex-direction: column;
  margin: $grid-gutter-width * 0.5 0;
  min-height: 90%;
  overflow: hidden;
  padding: 6px;
  position: relative;
  text-decoration: none;

  &__media {
    background-position: 50% 100%;
    background-size: contain;
    position: relative;

    &::before {
      content: '';
      display: block;
      padding-bottom: 56.52%;
    }
  }

  &__content {
    background-color: #fff;
    border-radius: 8px;
    color: #000;
    display: block;
    flex: 1 1 auto;
    padding: $grid-gutter-width * 0.5;
    position: relative;
    text-align: center;
    text-decoration: none;
  }

  &__title {
    color: #0063b3;
    display: block;
    font-size: calc(5px + 2vw);
    font-weight: 700;
    margin-bottom: 0.5em;
    text-decoration: none;
  }

  &__body {
    font-size: calc(3px + 2vw);
    text-decoration: none;
  }

  svg {
    bottom: 0;
    fill: #fff;
    position: absolute;
    transition: transform $duration;

    .filler { fill: var(--primary); }
  }

  // Accomodation -------------------
  .accomodation {
    &__house {
      right: 0;
      transform: translateY(6%);
      transform-origin: 100% 100%;
      width: 64%;
    }

    &__tree-1 {
      left: 16%;
      transform: translateY(6%);
      transform-origin: 50% 100%;
      width: 17%;
    }

    &__tree-2 {
      left: 3%;
      transform: translateY(6%);
      transform-origin: 50% 100%;
      width: 13%;
    }
  }

  // Transportation -------------------
  .transportation {
    &__car {
      animation: transportation-car 3s linear infinite;
      animation-delay: -1.4s;
      animation-play-state: paused;
      left: 0;
      width: 50%;
    }

    &__cloud-1 {
      animation: transportation-cloud-1 4s linear infinite;
      animation-delay: -1.1s;
      animation-play-state: paused;
      bottom: auto;
      left: 0;
      top: 3%;
      width: 20%;
    }

    &__cloud-2 {
      animation: transportation-cloud-1 4s linear infinite;
      animation-delay: -3s;
      animation-play-state: paused;
      bottom: auto;
      left: 0;
      top: 21%;
      width: 26%;
    }

    &__sun {
      bottom: auto;
      left: 42%;
      top: 11%;
      width: 15%;
    }
  }

  // Camp -------------------------------
  .camp {
    &__logs {
      left: 36%;
      transform: translateY(17%);
      transform-origin: 50% 100%;
      width: 20%;
    }

    &__flames {
      bottom: 23%;
      left: 40%;
      transform: translateY(17%);
      transform-origin: 50% 100%;
      width: 11%;

      path {
        animation: camp-flames 1s infinite linear alternate;
        animation-play-state: paused;
      }
    }

    &__tree-1 {
      left: 9%;
      transform-origin: 50% 100%;
      width: 16%;
    }

    &__tree-2 {
      bottom: 25%;
      left: 26%;
      transform-origin: 50% 100%;
      width: 13%;
    }

    &__tree-3 {
      left: 59%;
      transform-origin: 50% 100%;
      width: 19%;
    }

    &__tree-4 {
      bottom: 10%;
      left: 79%;
      transform-origin: 50% 100%;
      width: 15%;
    }
  }

  // Community -------------------
  .community {
    &__computer {
      left: 26%;
      transform: translateY(16%);
      transform-origin: 50% 100%;
      width: 51%;
    }

    &__person-1,
    &__person-2 {
      bottom: 28%;
      overflow: hidden;
      position: absolute;
      width: 12%;

      &::before {
        content: '';
        display: block;
        padding-bottom: 136.03%;
        width: 100%;
      }

      svg {
        animation: community-people-up infinite linear 2s alternate;
        animation-play-state: paused;
        bottom: 0;
        left: 0;
        position: absolute;
        transform: translateY(0);
        transform-origin: 50% 100%;
        width: 100%;
      }
    }

    &__person-1 {
      left: 32%;
      svg { animation-delay: -1.5s; }
    }

    &__person-2 {
      right: 29%;
      svg { animation-delay: -1s; }
    }

    &__bubble {
      animation: community-bubble infinite linear 2s alternate;
      animation-delay: -1.25s;
      animation-play-state: paused;
      bottom: 51%;
      left: 34%;
      width: 35%;
    }
  }

  // Support group -------------------
  .support-group {
    &__hand {
      left: 16%;
      transform: translateY(25%);
      transition: transform $duration;
      width: 56%;
    }

    &__heart {
      animation: pulse infinite linear 2s;
      animation-play-state: paused;
      bottom: 50%;
      left: 39%;
      width: 22%;
    }
  }

  // Support group 2 -------------------
  .support-group-2 {
    &__hands {
      left: 23%;
      transform: translateY(38%);
      transition: transform $duration;
      width: 54%;
    }

    &__heart {
      animation: pulse infinite linear 2s;
      animation-play-state: paused;
      bottom: 50%;
      left: 39%;
      width: 22%;
    }
  }

  // Practical support -------------------
  .practical-support {
    &__jar {
      bottom: 6%;
      left: 34%;
      transition: transform $duration;
      width: 31%;
    }

    &__heart {
      animation: pulse infinite linear 2s;
      animation-play-state: paused;
      bottom: 30%;
      left: 42%;
      width: 16%;
    }
  }

  // Financial support -------------------
  .financial-support {
    &__hand {
      left: 16%;
      transform: translateY(25%);
      transition: transform $duration;
      width: 56%;
    }

    &__coin {
      animation: rotateY infinite linear 2s;
      animation-play-state: paused;
      bottom: 48%;
      left: 39%;
      width: 22%;
    }
  }

  // Quit smoking -------------------
  .quit-smoking {
    &__hand {
      left: 16%;
      transform: translateY(25%);
      transition: transform $duration;
      width: 56%;
    }

    &__cigarette {
      bottom: 61%;
      left: 29%;
      width: 41%;
    }

    &__cross {
      bottom: 50%;
      left: 41%;
      width: 21%;
    }
  }

  // Look good ----------------------
  .look-good {
    &__person {
      bottom: -12%;
      left: 30%;
      width: 40%;
    }

    &__smile {
      bottom: 34%;
      left: 41%;
      width: 18%;

      .smile {
        d: path('M19.4,14.9c-6.5,0-12.7-2.5-17.3-7.2c-0.8-0.8-0.8-2.1,0-3c0.8-0.8,2.1-0.8,3,0c3.8,3.8,8.9,5.9,14.3,5.9c5.9,0,11.5-2.6,15.4-7.1c0.8-0.9,2.1-1,3-0.2c0.9,0.8,1,2.1,0.2,3C33.3,11.7,26.6,14.9,19.4,14.9z');
        transition: all $duration;
      }
    }

    &__star-1,
    &__star-2 {
      animation: look-good-star infinite linear 2s;
      animation-play-state: paused;
      bottom: 0;
      transform: translateY(110%);
      width: 10%;
    }

    &__star-1 {
      animation-delay: -1.2s;
      left: 17%;
    }

    &__star-2 {
      animation-delay: -0.6s;
      right: 17%;
    }
  }

  // Service-locator ----------------------
  .service-locator {
    &__map {
      bottom: 11%;
      left: 17%;
      width: 66%;
    }

    &__pin {
      animation: service-locator-pin infinite 2s;
      animation-play-state: paused;
      bottom: 29%;
      left: 38%;
      width: 23%;
    }
  }

  // Information kits -------------
  .information-kits {
    &__book {
      bottom: -17%;
      left: 17%;
      transform: rotate(0deg);
      transition: transform 0.5s;
      width: 60%;
    }
  }

  // Find a wig -------------
  .find-a-wig {
    &__person {
      bottom: -12%;
      left: 23%;
      width: 46%;

      path {
        animation: find-a-wig-wig infinite alternate 1s;
        animation-play-state: paused;
        d: path('M181.6,183.7c0-0.1,0-0.1,0-0.2c-4.6-24.9-16.8-40-34.6-43.2c4.6-3.3,8.8-7.2,12.4-11.5c-0.1,5.3-0.5,8.6-0.5,8.7c-0.2,1.5,0.4,2.9,1.7,3.8c0.7,0.5,1.5,0.7,2.3,0.7c0.6,0,1.3-0.1,1.8-0.5c1.4-0.7,33.5-18.1,22.2-77.2c-3.3-17.1-11.7-39.7-33-50.6c-10.2-5.2-19.6-5.7-23.2-5.6c-5.5-3.9-27.3-16.4-64.3,0.4C50.7,15.7,32.1,34,32.1,80.5v0.2c0,17.7-17.3,35.4-18.1,36.2c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0.2-0.1,0.5-0.1,0.7c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.2,0.5c0,0,0,0.1,0,0.1c0.1,0.2,0.2,0.4,0.3,0.5c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.3,0.3,0.4,0.4c0,0,0.1,0.1,0.1,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0,0.1,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.8,0.3,15.7,5.7,36-1.7c4.7,7.4,10.8,13.8,18,18.9c-17.6,3.9-30.1,18.5-34.2,40.8c0,0.1,0,0.3-0.1,0.4l-3,37.7c-0.1,1.1,0.3,2.2,1,3c0.8,0.8,1.8,1.3,2.9,1.3h146.5c1.2,0,2.3-0.5,3-1.4c0.8-0.9,1.1-2,0.9-3.2L181.6,183.7z M32.4,117.6c2.7-1.7,5.7-3.7,9.1-6.4c17.8-13.5,25.6-35,25.9-35.9c0.7-2.1-0.3-4.4-2.4-5.1c-2.1-0.7-4.4,0.3-5.1,2.4c-0.1,0.2-7.3,20.1-23.2,32.2c-2.6,1.9-4.8,3.5-6.8,4.9C35,102,40.1,91.5,40.1,80.7v-0.2c0-33.5,10.2-55.8,29.5-64.6c29.8-13.5,47.8-6.3,54.3-2.5l-7.1,11.1c-1.2,1.9-0.6,4.3,1.2,5.5c0.7,0.4,1.4,0.6,2.1,0.6c1.3,0,2.6-0.7,3.4-1.8l8.1-12.7c8.2,0.1,38.5,3.6,47.3,49.7c7,36.7-3.8,55.2-11.5,63.3c0.4-14.2-1.2-41.5-17-61.4C140,54.6,125.1,47,106.2,45.1c-0.1,0-0.3,0-0.4,0c-1.9,0-3.5,1.3-3.9,3.1c-0.1,0.4-8.4,36.5-35.3,56.3C53.3,114.3,41.2,117.2,32.4,117.6z M58.8,118.6c4-2,8.2-4.5,12.5-7.7c24.5-18,34.6-47.3,37.5-57.4c15,2.2,26.9,8.6,35.3,19.2c10.1,12.8,13.7,29.4,14.8,42.7c-6.2,10.7-15.6,19.4-27.4,24.6c-7.5,3.3-15.4,5-23.7,5s-16.2-1.7-23.7-5C73.7,135.4,65,127.8,58.8,118.6z M40.4,215.9l2.7-33.2c4.2-22.3,17.3-35.1,36.2-35.1h2.6c0.4,0.2,0.9,0.3,1.3,0.5c0.5,0.2,1,0.4,1.5,0.6c0.6,0.2,1.1,0.4,1.7,0.6c0.5,0.2,1,0.4,1.5,0.5c0.6,0.2,1.2,0.3,1.7,0.5c0.5,0.1,1,0.3,1.5,0.4c0.6,0.2,1.2,0.3,1.8,0.4c0.5,0.1,1,0.2,1.5,0.3c0.6,0.1,1.2,0.2,1.9,0.3c0.5,0.1,1,0.2,1.5,0.3c0.7,0.1,1.3,0.2,2,0.3c0.5,0.1,0.9,0.1,1.4,0.2c0.7,0.1,1.5,0.1,2.2,0.2c0.4,0,0.8,0.1,1.1,0.1c1.1,0.1,2.3,0.1,3.4,0.1s2.3,0,3.4-0.1c0.4,0,0.8-0.1,1.2-0.1c0.8-0.1,1.5-0.1,2.2-0.2c0.5,0,0.9-0.1,1.4-0.2c0.7-0.1,1.3-0.2,2-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.3-0.2,1.9-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.2-0.3,1.8-0.4c0.5-0.1,1-0.3,1.5-0.4c0.6-0.2,1.2-0.3,1.7-0.5c0.5-0.2,1-0.3,1.5-0.5c0.6-0.2,1.1-0.4,1.7-0.6c0.5-0.2,1-0.4,1.5-0.6c0.4-0.2,0.9-0.3,1.3-0.5h5.4c12.5,0,28.6,6.5,34.3,37.2l4.3,31H40.4z');
      }
    }
  }

  // Specialist support -------------
  .specialist-support {
    &__person {
      bottom: -12%;
      left: 41%;
      width: 46%;
    }

    &__bubble {
      bottom: 40%;
      left: 14%;
      width: 23%;

      &__line-1 {
        animation: specialist-support-line1 infinite 2s;
        animation-delay: -1s;
        animation-play-state: paused;
        transform-origin: 100% 50%;
      }

      &__line-2 {
        animation: specialist-support-line2 infinite 2s;
        animation-delay: -0.5s;
        animation-play-state: paused;
        transform-origin: 100% 50%;
      }
    }
  }

  // Talk to someone
  .talk-to-someone {
    &__person-1,
    &__person-2 {
      bottom: -4%;
      width: 27%;
    }

    &__person-1 {
      left: 16%;
    }

    &__person-2 {
      right: 16%;
    }

    &__bubble {
      bottom: 46%;
      left: 37%;
      width: 23%;
      transform: scale(1);
      transition: transform $duration;

      &__line-1 {
        animation: specialist-support-line1 infinite 2s;
        animation-delay: -1s;
        animation-play-state: paused;
        transform-origin: 100% 50%;
      }

      &__line-2 {
        animation: specialist-support-line2 infinite 2s;
        animation-delay: -0.5s;
        animation-play-state: paused;
        transform-origin: 100% 50%;
      }
    }
  }

  .hospice-palliative {
    &__icon {
      bottom: 10%;
      left: 28%;
      transform: rotate(0deg);
      transition: transform 0.75s;
      width: 44%;
    }
  }

  // Hover ============================
  &:hover {
    .accomodation {
      &__house { transform: translateY(6%) scale(1.1); }

      &__tree-1,
      &__tree-2 { transform: translateY(6%) rotate(-8deg); }
    }

    .transportation {
      &__car,
      &__cloud-1,
      &__cloud-2 { animation-play-state: running; }
    }

    .camp {
      &__logs { transform: translateY(17%) scale(1.15); }

      &__flames {
        transform: translateY(2%) scale(1.15);

        path { animation-play-state: running; }
      }

      &__tree-1,
      &__tree-2 { transform: translateY(0) rotate(-8deg); }

      &__tree-3,
      &__tree-4 { transform: translateY(0) rotate(8deg); }
    }

    .community {
      &__person-1,
      &__person-2 {
        svg { animation-play-state: running; }
      }

      &__bubble { animation-play-state: running; }
    }

    .support-group {
      &__hand { transform: translateY(15%); }
      &__heart { animation-play-state: running; }
    }

    .support-group-2 {
      &__hands { transform: translateY(35%); }
      &__heart { animation-play-state: running; }
    }

    .practical-support {
      &__jar { transform: scale(1.1) rotate(5deg); }
      &__heart { animation-play-state: running; }
    }

    .financial-support {
      &__hand { transform: translateY(15%); }
      &__coin { animation-play-state: running; }
    }

    .quit-smoking {
      &__hand { transform: translateY(15%); }
      &__cross { animation: rubberBand 1 linear 1s; }
    }

    .look-good {
      &__smile {
        .smile {
          d: path('M19.4,14.9c-8-0.2-13.2-4.6-18.3-10.2c-0.8-0.9-0.8-2.1,0-3c0.8-0.8,2.1-0.8,3,0c3.8,3.8,7.6,8.8,15.3,8.9c9,0.2,12.5-5.3,16.4-9.8c0.8-0.9,2.1-1,3-0.2c0.9,0.8,0.9,2,0.2,3C34.2,9.6,29.7,14.6,19.4,14.9z');
        }
      }

      &__star-1,
      &__star-2 { animation-play-state: running; }
    }

    .service-locator {
      &__pin { animation-play-state: running; }
    }

    .information-kits {
      &__book { transform: translateY(-14%) translateX(5%) rotate(20deg); }
    }

    .find-a-wig {
      &__person {
        path { animation-play-state: running; }
      }
    }

    .specialist-support,
    .talk-to-someone {
      &__bubble {
        transform: scale(1.1);

        &__line-1 { animation-play-state: running; }
        &__line-2 { animation-play-state: running; }
      }
    }

    .hospice-palliative {
      &__icon { transform: rotate(180deg); }
    }
  }
}

@keyframes transportation-car {
  from { transform: translate3d(210%, 2%, 0); }
  to { transform: translate3d(-110%, 2%, 0); }
}

@keyframes transportation-cloud-1 {
  from { transform: translate3d(510%, 0, 0); }
  to { transform: translate3d(-110%, 0, 0); }
}

@keyframes camp-flames {
  from { d: path('M23.4,62.1c-0.2,0-0.4,0-0.6,0l-0.1,0c-0.2,0-0.3,0-0.5,0c-8.3,0-16-4.5-20.1-11.9c-4.5-8.4-1.2-16.9,3-21.7c0.1-0.1,0.2-0.2,0.3-0.3c3.5-3.3,2.3-9.3,2.3-9.3C7.3,17,8.3,15.1,10,14.3c1.3-0.6,2.7-0.4,3.9,0.3c0.1-0.2,0.2-0.4,0.2-0.6c1.8-4.7,4.7-9,8.3-12.4c0,0,0.1-0.1,0.1-0.1c2.6-2.2,6.6-1.9,8.8,0.7c1.3,1.5,1.8,3.5,1.4,5.4c-1.7,7.9,0.7,10,3,12c9.4,8.2,9.5,18.2,9.4,20.4c0,7-2.2,12.5-6.5,16.5C33.1,61.5,26.1,62.1,23.4,62.1z M22.6,54.1l0.8,0c1.4,0,6.3-0.3,9.8-3.5c2.6-2.4,3.9-6,3.9-10.8c0-0.1,0-0.2,0-0.2c0-0.8,0.3-8-6.6-14c-3.4-3-6.4-6.8-6.3-13.7c-1,1.6-1.9,3.3-2.6,5c-0.5,1.3-0.9,2.6-1.1,4c-0.2,1.2-0.5,2.8-0.5,3.7c2,4,3.9,8.6,4.3,12c0.2,2.2-1.4,4.2-3.6,4.4c-2.2,0.2-4.2-1.4-4.4-3.6c-0.2-1.8-1.2-4.4-2.5-7.2c-0.7,1.3-1.6,2.5-2.7,3.6c-0.9,1-5.1,6.5-1.9,12.5C11.9,51.2,17,54.2,22.6,54.1z M24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9z'); }
  to { d: path('M23.4,62.1c-0.2,0-0.4,0-0.6,0l-0.1,0c-0.2,0-0.3,0-0.5,0c-8.3,0-16-4.5-20.1-11.9c-4.5-8.4-1.2-16.9,3-21.7c0.1-0.1,0.2-0.2,0.3-0.3c3.5-3.3,2.3-9.3,2.3-9.3C7.3,17,8.3,15.1,10,14.3c1.3-0.6,2.7-0.4,3.9,0.3c0.1-0.2,0.2-0.4,0.2-0.6c0.3-11.6-8.7-11-3.4-13.1c0.1,0,0,0,0,0c5.2-1,7-1.1,11.8-0.2c3.7,0.7,6.5,4.1,7,6c2,7.6,3.8,10.9,6.1,12.9c9.4,8.2,9.5,18.2,9.4,20.4c0,7-2.2,12.5-6.5,16.5C33.1,61.5,26.1,62.1,23.4,62.1z M22.6,54.1l0.8,0c1.4,0,6.3-0.3,9.8-3.5c2.6-2.4,3.9-6,3.9-10.8c0-0.1,0-0.2,0-0.2c0-0.8,2.2-8.6-5.3-13.9c-8.4-6-3.6-16.6-13.4-17.9c0,0,1,2.2,1.3,6.7c0.1,1.4-0.1,5.8-0.3,7.2c-0.2,1.2,0.6,2,0.5,3c2,4,3.9,8.6,4.3,12c0.2,2.2-1.4,4.2-3.6,4.4c-2.2,0.2-4.2-1.4-4.4-3.6c-0.2-1.8-1.2-4.4-2.5-7.2c-0.7,1.3-1.6,2.5-2.7,3.6c-0.9,1-5.1,6.5-1.9,12.5C11.9,51.2,17,54.2,22.6,54.1z M24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9C24.9,5.9,24.9,5.9,24.9,5.9z'); }
}

@keyframes look-good-star {
  from { transform: translate3d(0, 115%, 0); }
  to { transform: translate3d(0, -575%, 0); }
}

@keyframes service-locator-pin {
  0% {
    opacity: 1;
    transform: translate3d(0, -130%, 0);
  }

  46% {
    opacity: 1;
    transform: translate3d(0, 10%, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  90% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes find-a-wig-wig {
  from { d: path('M181.6,183.7c0-0.1,0-0.1,0-0.2c-4.6-24.9-16.8-40-34.6-43.2c4.6-3.3,8.8-7.2,12.4-11.5c-0.1,5.3-0.5,8.6-0.5,8.7c-0.2,1.5,0.4,2.9,1.7,3.8c0.7,0.5,1.5,0.7,2.3,0.7c0.6,0,1.3-0.1,1.8-0.5c1.4-0.7,33.5-18.1,22.2-77.2c-3.3-17.1-11.7-39.7-33-50.6c-10.2-5.2-19.6-5.7-23.2-5.6c-5.5-3.9-27.3-16.4-64.3,0.4C50.7,15.7,32.1,34,32.1,80.5v0.2c0,17.7-17.3,35.4-18.1,36.2c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0.2-0.1,0.5-0.1,0.7c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.2,0.5c0,0,0,0.1,0,0.1c0.1,0.2,0.2,0.4,0.3,0.5c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.3,0.3,0.4,0.4c0,0,0.1,0.1,0.1,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0,0.1,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.8,0.3,15.7,5.7,36-1.7c4.7,7.4,10.8,13.8,18,18.9c-17.6,3.9-30.1,18.5-34.2,40.8c0,0.1,0,0.3-0.1,0.4l-3,37.7c-0.1,1.1,0.3,2.2,1,3c0.8,0.8,1.8,1.3,2.9,1.3h146.5c1.2,0,2.3-0.5,3-1.4c0.8-0.9,1.1-2,0.9-3.2L181.6,183.7z M32.4,117.6c2.7-1.7,5.7-3.7,9.1-6.4c17.8-13.5,25.6-35,25.9-35.9c0.7-2.1-0.3-4.4-2.4-5.1c-2.1-0.7-4.4,0.3-5.1,2.4c-0.1,0.2-7.3,20.1-23.2,32.2c-2.6,1.9-4.8,3.5-6.8,4.9C35,102,40.1,91.5,40.1,80.7v-0.2c0-33.5,10.2-55.8,29.5-64.6c29.8-13.5,47.8-6.3,54.3-2.5l-7.1,11.1c-1.2,1.9-0.6,4.3,1.2,5.5c0.7,0.4,1.4,0.6,2.1,0.6c1.3,0,2.6-0.7,3.4-1.8l8.1-12.7c8.2,0.1,38.5,3.6,47.3,49.7c7,36.7-3.8,55.2-11.5,63.3c0.4-14.2-1.2-41.5-17-61.4C140,54.6,125.1,47,106.2,45.1c-0.1,0-0.3,0-0.4,0c-1.9,0-3.5,1.3-3.9,3.1c-0.1,0.4-8.4,36.5-35.3,56.3C53.3,114.3,41.2,117.2,32.4,117.6z M58.8,118.6c4-2,8.2-4.5,12.5-7.7c24.5-18,34.6-47.3,37.5-57.4c15,2.2,26.9,8.6,35.3,19.2c10.1,12.8,13.7,29.4,14.8,42.7c-6.2,10.7-15.6,19.4-27.4,24.6c-7.5,3.3-15.4,5-23.7,5s-16.2-1.7-23.7-5C73.7,135.4,65,127.8,58.8,118.6z M40.4,215.9l2.7-33.2c4.2-22.3,17.3-35.1,36.2-35.1h2.6c0.4,0.2,0.9,0.3,1.3,0.5c0.5,0.2,1,0.4,1.5,0.6c0.6,0.2,1.1,0.4,1.7,0.6c0.5,0.2,1,0.4,1.5,0.5c0.6,0.2,1.2,0.3,1.7,0.5c0.5,0.1,1,0.3,1.5,0.4c0.6,0.2,1.2,0.3,1.8,0.4c0.5,0.1,1,0.2,1.5,0.3c0.6,0.1,1.2,0.2,1.9,0.3c0.5,0.1,1,0.2,1.5,0.3c0.7,0.1,1.3,0.2,2,0.3c0.5,0.1,0.9,0.1,1.4,0.2c0.7,0.1,1.5,0.1,2.2,0.2c0.4,0,0.8,0.1,1.1,0.1c1.1,0.1,2.3,0.1,3.4,0.1s2.3,0,3.4-0.1c0.4,0,0.8-0.1,1.2-0.1c0.8-0.1,1.5-0.1,2.2-0.2c0.5,0,0.9-0.1,1.4-0.2c0.7-0.1,1.3-0.2,2-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.3-0.2,1.9-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.2-0.3,1.8-0.4c0.5-0.1,1-0.3,1.5-0.4c0.6-0.2,1.2-0.3,1.7-0.5c0.5-0.2,1-0.3,1.5-0.5c0.6-0.2,1.1-0.4,1.7-0.6c0.5-0.2,1-0.4,1.5-0.6c0.4-0.2,0.9-0.3,1.3-0.5h5.4c12.5,0,28.6,6.5,34.3,37.2l4.3,31H40.4z'); }
  to { d: path('M181.6,183.7c0-0.1,0-0.1,0-0.2c-4.6-24.9-16.8-40-34.6-43.2c4.6-3.3,2.8-9,2.4-11.5c-0.1,5.3-0.5,8.6-0.5,8.7c-0.2,1.5,0.4,2.9,1.7,3.8c0.7,0.5,1.5,0.7,2.3,0.7c0.6,0,1.3,0,1.8-0.5c6.2-5.4,41.1-29.6,32.2-77.2c-3.2-17.1-11.7-39.7-33-50.6c-10.2-5.2-19.6-5.7-23.2-5.6c-5.5-3.9-27.3-16.4-64.3,0.4C50.7,15.7,32.1,34,32.1,80.5v0.2c0,17.7-27.3,25.4-28.1,26.2c0,0-0.1,0.1-0.1,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.2,0.4-0.2,0.6c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0.2-0.1,0.5-0.1,0.7c0,0,0,0.1,0,0.1c0,0.2,0,0.4,0,0.6c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0.2,0.1,0.4,0.2,0.5c0,0,0,0.1,0,0.1c0.1,0.2,0.2,0.4,0.3,0.5c0,0,0,0.1,0.1,0.1c0.1,0.2,0.3,0.4,0.4,0.5c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.3,0.3,0.4,0.4c0,0,0.1,0.1,0.1,0.1c0.2,0.1,0.4,0.2,0.6,0.3c0.1,0,0.1,0,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.8,0.3,25.7,15.7,46,8.3c4.7,7.4,10.8,13.8,18,18.9c-17.6,3.9-30.1,18.5-34.2,40.8c0,0.1,0,0.3-0.1,0.4l-3,37.7c-0.1,1.1,0.3,2.2,1,3c0.8,0.8,1.8,1.3,2.9,1.3h146.5c1.2,0,2.3-0.5,3-1.4c0.8-0.9,1.1-2,0.9-3.2L181.6,183.7z M21,113.9c5.3-1.4,16.5-0.3,25.7-8.7c15.3-13.9,20.5-29,20.8-29.9c0.7-2.1-0.3-4.4-2.4-5.1c-2.1-0.7-4.4,0.3-5.1,2.4c-0.1,0.2-3.5,16.6-19.5,28.6c-7.1,5.4-18.7,5.2-20.7,6.5c10.7-8.5,20.3-16.3,20.3-27.1v-0.2c0-33.5,10.2-55.8,29.5-64.6c29.8-13.5,47.8-6.3,54.3-2.5l-7.1,11.1c-1.2,1.9-0.6,4.3,1.2,5.5c0.7,0.4,1.4,0.6,2.1,0.6c1.3,0,2.6-0.7,3.4-1.8l8.1-12.7c8.2,0.1,38.5,3.6,47.3,49.7c7,36.7-13.8,55.2-21.5,63.3c0.4-14.2,8.8-41.5-7-61.4C140,54.6,125.1,47,106.2,45.1c-0.1,0-0.3,0-0.4,0c-1.9,0-3.5,1.3-3.9,3.1c-0.1,0.4-8.4,36.5-35.3,56.3C53.3,114.3,37.8,120.9,21,113.9z M58.8,118.6c4-2,8.2-4.5,12.5-7.7c24.5-18,34.6-47.3,37.5-57.4c15,2.2,26.9,8.6,35.3,19.2c10.1,12.8,8.1,36.7,5.2,56.1c-0.9,1.6-6,6-17.8,11.2c-7.5,3.3-15.4,5-23.7,5s-16.2-1.7-23.7-5C73.7,135.4,65,127.8,58.8,118.6z M40.4,215.9l2.7-33.2c4.2-22.3,17.3-35.1,36.2-35.1h2.6c0.4,0.2,0.9,0.3,1.3,0.5c0.5,0.2,1,0.4,1.5,0.6c0.6,0.2,1.1,0.4,1.7,0.6c0.5,0.2,1,0.4,1.5,0.5c0.6,0.2,1.2,0.3,1.7,0.5c0.5,0.1,1,0.3,1.5,0.4c0.6,0.2,1.2,0.3,1.8,0.4c0.5,0.1,1,0.2,1.5,0.3c0.6,0.1,1.2,0.2,1.9,0.3c0.5,0.1,1,0.2,1.5,0.3c0.7,0.1,1.3,0.2,2,0.3c0.5,0.1,0.9,0.1,1.4,0.2c0.7,0.1,1.5,0.1,2.2,0.2c0.4,0,0.8,0.1,1.1,0.1c1.1,0.1,2.3,0.1,3.4,0.1s2.3,0,3.4-0.1c0.4,0,0.8-0.1,1.2-0.1c0.8-0.1,1.5-0.1,2.2-0.2c0.5,0,0.9-0.1,1.4-0.2c0.7-0.1,1.3-0.2,2-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.3-0.2,1.9-0.3c0.5-0.1,1-0.2,1.5-0.3c0.6-0.1,1.2-0.3,1.8-0.4c0.5-0.1,1-0.3,1.5-0.4c0.6-0.2,1.2-0.3,1.7-0.5c0.5-0.2,1-0.3,1.5-0.5c0.6-0.2,1.1-0.4,1.7-0.6c0.5-0.2,1-0.4,1.5-0.6c0.4-0.2,0.9-0.3,1.3-0.5h5.4c12.5,0,28.6,6.5,34.3,37.2l4.3,31H40.4z'); }
}

@keyframes specialist-support-line1 {
  0% {
    d: path('M29.2,32.7h-2c-2.2,0-4,1.8-4,4s1.8,4,4,4h2c2.2,0,4-1.8,4-4S31.4,32.7,29.2,32.7z');
    opacity: 0;
  }

  30%,
  70% {
    d: path('M69.2,32.7h-42c-2.2,0-4,1.8-4,4s1.8,4,4,4h42c2.2,0,4-1.8,4-4S71.4,32.7,69.2,32.7z');
    opacity: 1;
  }

  100% {
    d: path('M69.2,32.7h-3c-2.2,0-4,1.8-4,4s1.8,4,4,4h3c2.2,0,4-1.8,4-4S71.4,32.7,69.2,32.7z');
    opacity: 0;
  }
}

@keyframes specialist-support-line2 {
  0% {
    d: path('M44.2,49h-1.8c-2.2,0-4,1.8-4,4s1.8,4,4,4h1.8c2.2,0,4-1.8,4-4S46.4,49,44.2,49z');
    opacity: 0;
  }

  30%,
  70% {
    d: path('M69.2,49H42.4c-2.2,0-4,1.8-4,4s1.8,4,4,4h26.8c2.2,0,4-1.8,4-4S71.4,49,69.2,49z');
    opacity: 1;
  }

  100% {
    d: path('M69.2,49h-2.8c-2.2,0-4,1.8-4,4s1.8,4,4,4h2.8c2.2,0,4-1.8,4-4S71.4,49,69.2,49z');
    opacity: 0;
  }
}

@keyframes community-people-up {
  0%,
  40% { transform: translateY(101%); }

  50%,
  100% { transform: translateY(0); }
}

@keyframes community-bubble {
  0%,
  65% { opacity: 0; }

  75%,
  100% { opacity: 1; }
}

@keyframes pulse {
  0%,
  30%,
  48%,
  52%,
  70%,
  100% { transform: scale(1); }

  40%,
  60% { transform: scale(1.2); }
}

@keyframes rotateY {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes rubberBand {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); }
}

@media (min-width: 576px) {
  .service-card {
    &__title {
      font-size: calc(10px + 1vw);
    }
  }
}

@media (min-width: 576px) {
  .service-card {
    &__title {
      font-size: calc(5px + 1.5vw);
    }
    
    &__body {
      font-size: calc(3px + 1.5vw);
    }
  }
}

@media (min-width: 768px) {
  .service-card {
    &__title {
      font-size: calc(5px + 1vw);
    }
    
    &__body {
      font-size: calc(3px + 1vw);
    }
  }
}

@media (min-width: 992px) {
  .service-card {
    &__title {
      font-size: calc(5px + 1vw);
    }
    
    &__body {
      font-size: calc(3px + 1vw);
    }
  }
}

@media (min-width: 1200px) {
  .service-card {
    &__title {
      font-size: calc(5px + 0.75vw);
    }
    
    &__body {
      font-size: calc(3px + 0.75vw);
    }
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console