<div class="usp-small">
<div class="usp-small__inner">
<div class="usp-small__items">
<div class="usp-small__item">
<div class="usp-snippet">
<div class="usp-snippet__visual">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
<img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
</picture>
</div>
<div class="usp-snippet__content">
<p class="usp-snippet__text p--2">Feature 1 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
</div>
</div>
<div class="usp-small__item">
<div class="usp-snippet">
<div class="usp-snippet__visual">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
<img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
</picture>
</div>
<div class="usp-snippet__content">
<p class="usp-snippet__text p--2">Feature 2 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
</div>
</div>
<div class="usp-small__item">
<div class="usp-snippet">
<div class="usp-snippet__visual">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
<img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
</picture>
</div>
<div class="usp-snippet__content">
<p class="usp-snippet__text p--2">Feature 3 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
</div>
</div>
<div class="usp-small__item">
<div class="usp-snippet">
<div class="usp-snippet__visual">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
<img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
</picture>
</div>
<div class="usp-snippet__content">
<p class="usp-snippet__text p--2">Feature 4 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
</div>
</div>
<div class="usp-small__item">
<div class="usp-snippet">
<div class="usp-snippet__visual">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
<img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
</picture>
</div>
<div class="usp-snippet__content">
<p class="usp-snippet__text p--2">Feature 5 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="usp-small{{#if modifier}} usp-small--{{ modifier }}{{/if}}">
<div class="usp-small__inner">
<div class="usp-small__items">
{{#each usps}}
<div class="usp-small__item">
{{render '@usp-snippet--b' this }}
</div>
{{/each}}
</div>
</div>
</div>
modifier: ''
usps:
- modifier: ''
intro: >-
Feature 1 title lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
text: >-
Feature 1 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
visual:
src:
mobile: /graphics/video-poster-mobile.jpg
desktop: /graphics/video-poster.jpg
alt: ''
- modifier: ''
intro: Feature 2 title lorum ipsum dolor sit amet
text: >-
Feature 2 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
visual:
src:
mobile: /graphics/video-poster-mobile.jpg
desktop: /graphics/video-poster.jpg
alt: ''
- modifier: ''
intro: Feature 3 title lorum ipsum dolor sit amet lorum ipsum dolor
text: >-
Feature 3 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
visual:
src:
mobile: /graphics/video-poster-mobile.jpg
desktop: /graphics/video-poster.jpg
alt: ''
- modifier: ''
intro: Feature 4 title lorum ipsum dolor sit amet lorum ipsum dolor
text: >-
Feature 4 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
visual:
src:
mobile: /graphics/video-poster-mobile.jpg
desktop: /graphics/video-poster.jpg
alt: ''
- modifier: ''
intro: Feature 5 title lorum ipsum dolor sit amet lorum ipsum dolor
text: >-
Feature 5 text lorum ipsum dolor sit amet lorum ipsum dolor sit ametlorum
ipsum dolor sit amet.Feature 1 lorum ipsum dolor sit amet more info
visual:
src:
mobile: /graphics/video-poster-mobile.jpg
desktop: /graphics/video-poster.jpg
alt: ''
.usp-small {
padding: 0 var(--gutter--bucket);
}
.usp-small__inner {
max-width: var(--section--8);
margin: 0 auto;
@media screen and (min-width: 768px) {
overflow: hidden;
}
}
.usp-small__items {
@media screen and (min-width: 768px) {
display: flex;
flex-wrap: wrap;
margin: calc(var(--gap--4) * -1);
}
}
.usp-small__item {
margin-top: var(--gap--4);
@media screen and (min-width: 768px) {
flex: 0 0 50%;
padding: var(--gap--4);
margin-top: 0;
}
&:first-child {
margin-top: 0;
}
}
No notes defined.