<div class="product_spotlight js-product-spotlight theme_blue">
<div class="product_spotlight_mobile">
<div class="product_spotlight_mobile_header">
<h2 class="product_spotlight_mobile_title">Our Product Philosophy</h2>
</div>
<div class="product_spotlight_mobile_graphics_wrapper">
<figure class="product_spotlight_mobile_graphic js-product-spotlight-mobile-graphic active" data-graphic="graphic-1">
<picture class="product_spotlight_mobile_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x552/1">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x416/1">
<img class="product_spotlight_mobile_image" src="//images.fastspot.com/framework/500x500/1" alt="image of _" loading="lazy" width="500px" height="500px">
</picture>
</figure>
<figure class="product_spotlight_mobile_graphic js-product-spotlight-mobile-graphic" data-graphic="graphic-2">
<picture class="product_spotlight_mobile_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x552/2">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x416/2">
<img class="product_spotlight_mobile_image" src="//images.fastspot.com/framework/500x500/2" alt="image of _" loading="lazy" width="500px" height="500px">
</picture>
</figure>
<figure class="product_spotlight_mobile_graphic js-product-spotlight-mobile-graphic" data-graphic="graphic-3">
<picture class="product_spotlight_mobile_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x552/3">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x416/3">
<img class="product_spotlight_mobile_image" src="//images.fastspot.com/framework/500x500/3" alt="image of _" loading="lazy" width="500px" height="500px">
</picture>
</figure>
<figure class="product_spotlight_mobile_graphic js-product-spotlight-mobile-graphic" data-graphic="graphic-4">
<picture class="product_spotlight_mobile_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x552/4">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x416/4">
<img class="product_spotlight_mobile_image" src="//images.fastspot.com/framework/500x500/4" alt="image of _" loading="lazy" width="500px" height="500px">
</picture>
</figure>
<figure class="product_spotlight_mobile_graphic js-product-spotlight-mobile-graphic" data-graphic="graphic-5">
<picture class="product_spotlight_mobile_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x552/1">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x416/1">
<img class="product_spotlight_mobile_image" src="//images.fastspot.com/framework/500x500/1" alt="image of _" loading="lazy" width="500px" height="500px">
</picture>
</figure>
<figure class="product_spotlight_mobile_graphic js-product-spotlight-mobile-graphic" data-graphic="graphic-6">
<picture class="product_spotlight_mobile_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/framework/980x552/2">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/framework/740x416/2">
<img class="product_spotlight_mobile_image" src="//images.fastspot.com/framework/500x500/2" alt="image of _" loading="lazy" width="500px" height="500px">
</picture>
</figure>
</div>
<div class="product_spotlight_mobile_cards js-product-spotlight-mobile-carousel js-carousel" data-carousel-options='{"controls": false, "contained": false}'>
<div class="product_spotlight_mobile_card js-product-spotlight-mobile-card" data-graphic="graphic-1">
<h3 class="product_spotlight_mobile_card_title">Physically Rehabilitate Pations Functionally</h3>
<span class="product_spotlight_mobile_card_description">Vivamus sagittis lacus vel augue <a href="#">laoreet rutrum</a> faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
</div>
<div class="product_spotlight_mobile_card js-product-spotlight-mobile-card" data-graphic="graphic-2">
<h3 class="product_spotlight_mobile_card_title">Flexible, Repeatable Configurability</h3>
<span class="product_spotlight_mobile_card_description">Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
</div>
<div class="product_spotlight_mobile_card js-product-spotlight-mobile-card" data-graphic="graphic-3">
<h3 class="product_spotlight_mobile_card_title">Realtime Data Capture</h3>
<span class="product_spotlight_mobile_card_description">Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</span>
</div>
<div class="product_spotlight_mobile_card js-product-spotlight-mobile-card" data-graphic="graphic-4">
<h3 class="product_spotlight_mobile_card_title">Gamification Improves Engagement</h3>
<span class="product_spotlight_mobile_card_description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span>
</div>
<div class="product_spotlight_mobile_card js-product-spotlight-mobile-card" data-graphic="graphic-5">
<h3 class="product_spotlight_mobile_card_title">You're Never Done Learning</h3>
<span class="product_spotlight_mobile_card_description">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</span>
</div>
<div class="product_spotlight_mobile_card js-product-spotlight-mobile-card" data-graphic="graphic-6">
<h3 class="product_spotlight_mobile_card_title">Flexible, Repeatable Configurability</h3>
<span class="product_spotlight_mobile_card_description">Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
</div>
</div>
</div>
<div class="product_spotlight_desktop cards_6">
<div class="product_spotlight_desktop_graphics_wrapper">
<figure class="product_spotlight_desktop_graphic js-product-spotlight-desktop-graphic active" data-graphic="graphic-1">
<picture class="product_spotlight_desktop_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/framework/1440x1080/1">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x915/1">
<img class="product_spotlight_desktop_image" src="//images.fastspot.com/framework/980x980/1" alt="image of _" loading="lazy" width="980px" height="980px">
</picture>
</figure>
<figure class="product_spotlight_desktop_graphic js-product-spotlight-desktop-graphic" data-graphic="graphic-2">
<picture class="product_spotlight_desktop_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/framework/1440x1080/2">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x915/2">
<img class="product_spotlight_desktop_image" src="//images.fastspot.com/framework/980x980/2" alt="image of _" loading="lazy" width="980px" height="980px">
</picture>
</figure>
<figure class="product_spotlight_desktop_graphic js-product-spotlight-desktop-graphic" data-graphic="graphic-3">
<picture class="product_spotlight_desktop_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/framework/1440x1080/3">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x915/3">
<img class="product_spotlight_desktop_image" src="//images.fastspot.com/framework/980x980/3" alt="image of _" loading="lazy" width="980px" height="980px">
</picture>
</figure>
<figure class="product_spotlight_desktop_graphic js-product-spotlight-desktop-graphic" data-graphic="graphic-4">
<picture class="product_spotlight_desktop_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/framework/1440x1080/4">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x915/4">
<img class="product_spotlight_desktop_image" src="//images.fastspot.com/framework/980x980/4" alt="image of _" loading="lazy" width="980px" height="980px">
</picture>
</figure>
<figure class="product_spotlight_desktop_graphic js-product-spotlight-desktop-graphic" data-graphic="graphic-5">
<picture class="product_spotlight_desktop_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/framework/1440x1080/1">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x915/1">
<img class="product_spotlight_desktop_image" src="//images.fastspot.com/framework/980x980/1" alt="image of _" loading="lazy" width="980px" height="980px">
</picture>
</figure>
<figure class="product_spotlight_desktop_graphic js-product-spotlight-desktop-graphic" data-graphic="graphic-6">
<picture class="product_spotlight_desktop_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/framework/1440x1080/2">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/framework/1220x915/2">
<img class="product_spotlight_desktop_image" src="//images.fastspot.com/framework/980x980/2" alt="image of _" loading="lazy" width="980px" height="980px">
</picture>
</figure>
</div>
<div class="product_spotlight_desktop_content">
<div class="product_spotlight_desktop_fixed_content">
<div class="product_spotlight_desktop_header">
<h2 class="product_spotlight_desktop_title">Our Product Philosophy</h2>
</div>
<ul class="product_spotlight_desktop_card_list">
<li class="product_spotlight_desktop_card_list_item js-product-spotlight-card-item js-product-spotlight-card-item-1">Physically Rehabilitate Pations Functionally</li>
<li class="product_spotlight_desktop_card_list_item js-product-spotlight-card-item js-product-spotlight-card-item-2">Flexible, Repeatable Configurability</li>
<li class="product_spotlight_desktop_card_list_item js-product-spotlight-card-item js-product-spotlight-card-item-3">Realtime Data Capture</li>
<li class="product_spotlight_desktop_card_list_item js-product-spotlight-card-item js-product-spotlight-card-item-4">Gamification Improves Engagement</li>
<li class="product_spotlight_desktop_card_list_item js-product-spotlight-card-item js-product-spotlight-card-item-5">You're Never Done Learning</li>
<li class="product_spotlight_desktop_card_list_item js-product-spotlight-card-item js-product-spotlight-card-item-6">Flexible, Repeatable Configurability</li>
</ul>
</div>
<div class="product_spotlight_desktop_cards">
<div class="product_spotlight_desktop_card js-product-spotlight-desktop-card-wrapper" data-checkpoint-intersect="center-top" data-checkpoint-offset="300">
<div class="product_spotlight_desktop_card_inner js-product-spotlight-desktop-card js-swap" data-graphic="graphic-1" data-swap-target=".js-product-spotlight-card-item-1" data-checkpoint-intersect="center-top" data-checkpoint-offset="-100">
<h3 class="product_spotlight_mobile_card_title">Physically Rehabilitate Pations Functionally</h3>
<span class="product_spotlight_mobile_card_description">Vivamus sagittis lacus vel augue <a href="#">laoreet rutrum</a> faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
</div>
</div>
<div class="product_spotlight_desktop_card js-product-spotlight-desktop-card-wrapper" data-checkpoint-intersect="center-top" data-checkpoint-offset="300">
<div class="product_spotlight_desktop_card_inner js-product-spotlight-desktop-card js-swap" data-graphic="graphic-2" data-swap-target=".js-product-spotlight-card-item-2" data-checkpoint-intersect="center-top" data-checkpoint-offset="-100">
<h3 class="product_spotlight_mobile_card_title">Flexible, Repeatable Configurability</h3>
<span class="product_spotlight_mobile_card_description">Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
</div>
</div>
<div class="product_spotlight_desktop_card js-product-spotlight-desktop-card-wrapper" data-checkpoint-intersect="center-top" data-checkpoint-offset="300">
<div class="product_spotlight_desktop_card_inner js-product-spotlight-desktop-card js-swap" data-graphic="graphic-3" data-swap-target=".js-product-spotlight-card-item-3" data-checkpoint-intersect="center-top" data-checkpoint-offset="-100">
<h3 class="product_spotlight_mobile_card_title">Realtime Data Capture</h3>
<span class="product_spotlight_mobile_card_description">Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</span>
</div>
</div>
<div class="product_spotlight_desktop_card js-product-spotlight-desktop-card-wrapper" data-checkpoint-intersect="center-top" data-checkpoint-offset="300">
<div class="product_spotlight_desktop_card_inner js-product-spotlight-desktop-card js-swap" data-graphic="graphic-4" data-swap-target=".js-product-spotlight-card-item-4" data-checkpoint-intersect="center-top" data-checkpoint-offset="-100">
<h3 class="product_spotlight_mobile_card_title">Gamification Improves Engagement</h3>
<span class="product_spotlight_mobile_card_description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span>
</div>
</div>
<div class="product_spotlight_desktop_card js-product-spotlight-desktop-card-wrapper" data-checkpoint-intersect="center-top" data-checkpoint-offset="300">
<div class="product_spotlight_desktop_card_inner js-product-spotlight-desktop-card js-swap" data-graphic="graphic-5" data-swap-target=".js-product-spotlight-card-item-5" data-checkpoint-intersect="center-top" data-checkpoint-offset="-100">
<h3 class="product_spotlight_mobile_card_title">You're Never Done Learning</h3>
<span class="product_spotlight_mobile_card_description">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</span>
</div>
</div>
<div class="product_spotlight_desktop_card js-product-spotlight-desktop-card-wrapper" data-checkpoint-intersect="center-top" data-checkpoint-offset="300">
<div class="product_spotlight_desktop_card_inner js-product-spotlight-desktop-card js-swap" data-graphic="graphic-6" data-swap-target=".js-product-spotlight-card-item-6" data-checkpoint-intersect="center-top" data-checkpoint-offset="0">
<h3 class="product_spotlight_mobile_card_title">Flexible, Repeatable Configurability</h3>
<span class="product_spotlight_mobile_card_description">Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product_spotlight js-product-spotlight{% if theme %} theme_{{ theme }}{% endif %}">
<div class="product_spotlight_mobile">
<div class="product_spotlight_mobile_header">
<h2 class="product_spotlight_mobile_title">{{ title }}</h2>
</div>
<div class="product_spotlight_mobile_graphics_wrapper">
{% for card in cards %}
<figure class="product_spotlight_mobile_graphic js-product-spotlight-mobile-graphic{% if loop.index == 1 %} active{% endif %}" data-graphic="graphic-{{ loop.index }}">
{% include '@partial-picture' with {
class: 'product_spotlight_mobile',
image: card.image,
alt: card.image_alt,
loading: 'lazy',
default: img.square.xsml,
sources: {
'740px': img.wide.med,
'500px': img.wide.sml
}
} %}
</figure>
{% endfor %}
</div>
<div class="product_spotlight_mobile_cards js-product-spotlight-mobile-carousel js-carousel" data-carousel-options='{"controls": false, "contained": false}'>
{% for card in cards %}
<div class="product_spotlight_mobile_card js-product-spotlight-mobile-card" data-graphic="graphic-{{ loop.index }}">
<h3 class="product_spotlight_mobile_card_title">{{ card.title }}</h3>
<span class="product_spotlight_mobile_card_description">{{ card.description }}</span>
</div>
{% endfor %}
</div>
</div>
<div class="product_spotlight_desktop cards_{{ cards|length }}">
<div class="product_spotlight_desktop_graphics_wrapper">
{% for card in cards %}
<figure class="product_spotlight_desktop_graphic js-product-spotlight-desktop-graphic{% if loop.index == 1 %} active{% endif %}" data-graphic="graphic-{{ loop.index }}">
{% include '@partial-picture' with {
class: 'product_spotlight_desktop',
image: card.image,
alt: card.image_alt,
loading: 'lazy',
default: img.square.med,
sources: {
'1394px': img.full.xlrg,
'1220px': img.full.lrg
}
} %}
</figure>
{% endfor %}
</div>
<div class="product_spotlight_desktop_content">
<div class="product_spotlight_desktop_fixed_content">
<div class="product_spotlight_desktop_header">
<h2 class="product_spotlight_desktop_title">{{ title }}</h2>
</div>
<ul class="product_spotlight_desktop_card_list">
{% for card in cards %}
<li class="product_spotlight_desktop_card_list_item js-product-spotlight-card-item js-product-spotlight-card-item-{{ loop.index }}">{{ card.title }}</li>
{% endfor %}
</ul>
</div>
<div class="product_spotlight_desktop_cards">
{% for card in cards %}
<div class="product_spotlight_desktop_card js-product-spotlight-desktop-card-wrapper" data-checkpoint-intersect="center-top" data-checkpoint-offset="300">
<div class="product_spotlight_desktop_card_inner js-product-spotlight-desktop-card js-swap" data-graphic="graphic-{{ loop.index }}" data-swap-target=".js-product-spotlight-card-item-{{ loop.index }}" data-checkpoint-intersect="center-top"{% if loop.index != 1 and not loop.last %} data-checkpoint-offset="-100"{% endif %}{% if loop.index == 1 %} data-checkpoint-offset="-100"{% endif %}{% if loop.last %} data-checkpoint-offset="0"{% endif %}>
<h3 class="product_spotlight_mobile_card_title">{{ card.title }}</h3>
<span class="product_spotlight_mobile_card_description">{{ card.description }}</span>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
No notes defined.