<div class="usp-interactive">
<div class="usp-interactive__in">
<div class="usp-interactive__inner">
<div class="togglers togglers--accordion">
<div class="toggler active">
<div class="toggler__trigger">
<p class="heading heading--7"><strong>Specific feature name</strong></p>
<div class="toggler__icon"><span class="icon-plus">
<span class="icon-plus__inner"></span>
</span>
</div>
</div>
<div class="toggler__target">
<div class="toggler__visual">
<div class="toggler__visual__inner">
<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>
<div class="toggler__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
<p>
<section class="overlay-content">
<a href="#" target="_blank" class="overlay-content__trigger link link--underlined">
<span class="link__label">Discover more</span>
</a>
<div class="overlay-content__overlay">
<div class="overlay-content__header">
<div class="overlay-content__header__inner">
<span class="overlay-content__heading">Advanced CPU and rock-solid stability</span>
<a class="overlay-content__close">
<span class="icon-cross">
<span class="icon-cross__inner"></span>
</span>
</a>
</div>
</div>
<div class="overlay-content__inner">
<section class="col-two">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two col-two--reversed">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two col-two--reversed">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</p>
</div>
</div>
</div>
<div class="toggler ">
<div class="toggler__trigger">
<p class="heading heading--7"><strong>Specific feature name</strong></p>
<div class="toggler__icon"><span class="icon-plus">
<span class="icon-plus__inner"></span>
</span>
</div>
</div>
<div class="toggler__target">
<div class="toggler__visual">
<div class="toggler__visual__inner">
<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="https://via.placeholder.com/704x412">
<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="https://via.placeholder.com/704x412">
<img data-sizes="auto" data-src="https://via.placeholder.com/704x412" class="lazyload" alt="">
</picture>
</div>
</div>
<div class="toggler__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
<p>
<section class="overlay-content">
<a href="#" target="_blank" class="overlay-content__trigger link link--underlined">
<span class="link__label">Discover more</span>
</a>
<div class="overlay-content__overlay">
<div class="overlay-content__header">
<div class="overlay-content__header__inner">
<span class="overlay-content__heading">Advanced CPU and rock-solid stability</span>
<a class="overlay-content__close">
<span class="icon-cross">
<span class="icon-cross__inner"></span>
</span>
</a>
</div>
</div>
<div class="overlay-content__inner">
<section class="col-two">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two col-two--reversed">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two col-two--reversed">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</p>
</div>
</div>
</div>
<div class="toggler">
<div class="toggler__trigger">
<p class="heading heading--7"><strong>Specific feature name with long title and video</strong></p>
<div class="toggler__icon"><span class="icon-plus">
<span class="icon-plus__inner"></span>
</span>
</div>
</div>
<div class="toggler__target">
<div class="toggler__visual">
<div class="toggler__visual__inner">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="toggler__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
<p>
<section class="overlay-content">
<a href="#" target="_blank" class="overlay-content__trigger link link--underlined">
<span class="link__label">Discover more</span>
</a>
<div class="overlay-content__overlay">
<div class="overlay-content__header">
<div class="overlay-content__header__inner">
<span class="overlay-content__heading">Advanced CPU and rock-solid stability</span>
<a class="overlay-content__close">
<span class="icon-cross">
<span class="icon-cross__inner"></span>
</span>
</a>
</div>
</div>
<div class="overlay-content__inner">
<section class="col-two">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two col-two--reversed">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--4"></div>
<section class="col-two col-two--reversed">
<div class="col-two__inner">
<div class="col-two__item">
<div class="col-two__visual">
<div class="video-player">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
<span class="video-player__trigger">
<span class="video-ID">agkb5TSjEmc</span>
<span class="icon-play">
<span class="icon-play__inner"></span>
<span class="icon-play__icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</div>
</div>
</div>
<div class="col-two__item">
<div class="col-two__content">
<h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>
<div class="col-two__item__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</p>
</div>
</div>
</div>
<div class="toggler">
<div class="toggler__trigger">
<p class="heading heading--7"><strong>Specific feature name with autoplay video</strong></p>
<div class="toggler__icon"><span class="icon-plus">
<span class="icon-plus__inner"></span>
</span>
</div>
</div>
<div class="toggler__target">
<div class="toggler__visual">
<div class="toggler__visual__inner">
<div class="video-bg">
<video loop playsinline poster="/graphics/video-poster.jpg" src=""https://videos.ctfassets.net/8cd2csgvqd3m/44F64RbvN7m273w1IfIGFj/3d1d03d94e5e519d4e371d32fa76c9a3/E8Sport_KSP_3_FIT_16-9_Home_desktop.mp4""></video>
<a class="video-bg__control video-bg__control--right">
<span class="icon-media">
<span class="icon-media__inner">
<span class="icon-media__pause">
<svg class="icon-media__play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.6 14">
<path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
</svg>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="toggler__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
</div>
</div>
</div>
</div>
<div class="usp-interactive__visual"></div>
</div>
</div>
</div>
<div class="usp-interactive{{#if modifier}} usp-interactive--{{ modifier }}{{/if}}">
<div class="usp-interactive__in">
<div class="usp-interactive__inner">
<div class="togglers togglers--accordion">
{{#each togglers}}
{{render '@toggler' this merge=true }}
{{/each}}
<div class="toggler">
<div class="toggler__trigger">
<p class="heading heading--7"><strong>Specific feature name with long title and video</strong></p>
<div class="toggler__icon">{{> @icon-plus }}</div>
</div>
<div class="toggler__target">
<div class="toggler__visual">
<div class="toggler__visual__inner">
{{render '@video-player' video merge=true }}
</div>
</div>
<div class="toggler__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
<p>{{render '@overlay-content' }}</p>
</div>
</div>
</div>
<div class="toggler">
<div class="toggler__trigger">
<p class="heading heading--7"><strong>Specific feature name with autoplay video</strong></p>
<div class="toggler__icon">{{> @icon-plus }}</div>
</div>
<div class="toggler__target">
<div class="toggler__visual">
<div class="toggler__visual__inner">
{{render '@video-bg--right' videobg merge=true }}
</div>
</div>
<div class="toggler__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
</div>
</div>
</div>
</div>
<div class="usp-interactive__visual"></div>
</div>
</div>
</div>
video:
image:
src:
mobile: /graphics/video-player-mobile.jpg
desktop: /graphics/video-player.jpg
alt: ''
video:
id: agkb5TSjEmc
videobg:
video:
src: >-
"https://videos.ctfassets.net/8cd2csgvqd3m/44F64RbvN7m273w1IfIGFj/3d1d03d94e5e519d4e371d32fa76c9a3/E8Sport_KSP_3_FIT_16-9_Home_desktop.mp4"
poster: /graphics/video-poster.jpg
modifier: right
hasAudio: true
togglers:
- modifier: active
visual:
src:
mobile: /graphics/video-poster-mobile.jpg
desktop: /graphics/video-poster.jpg
alt: null
- modifier: null
visual:
src:
mobile: https://via.placeholder.com/704x412
desktop: https://via.placeholder.com/704x412
alt: null
.usp-interactive {
--toggler--width: 100%;
--toggler--gap: var(--gap--4);
--usp-interactive-offset: calc((100vw - var(--section--8)) / 2);
padding: 0 var(--gutter--bucket);
display: block;
flex: 1 1 auto;
width: 100%;
overflow: hidden;
.usp-interactive__in {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: var(--section--8);
}
.togglers {
display: flex;
flex-flow: column;
flex-shrink: 0;
padding-right: var(--toggler--gap);
width: var(--toggler--width);
}
.toggler {
&__visual {
display: block;
}
&__icon {
flex-shrink: 0;
}
&.active {
.toggler__trigger {
pointer-events: none;
}
}
}
.usp-interactive__visual {
display: none;
}
&--reversed {
.togglers {
padding-right: 0;
}
}
@media screen and (min-width: 768px) {
--toggler--width: calc(33.33% - var(--gap--1));
.toggler {
&__target {
overflow: initial;
}
&__content {
height: 100%;
overflow: hidden;
}
&__visual {
animation: fadeOut 1000ms 1 forwards 750ms;
// height: 100%;
position: absolute;
left: calc(var(--toggler--width) + var(--toggler--gap));
margin: 0;
top: 0;
width: calc(100% - var(--toggler--width) - var(--toggler--gap));
&__inner {
height: 100%;
}
}
&.active {
z-index: 10;
.toggler__visual {
animation: fadeIn 1000ms 1 forwards;
}
}
}
.usp-interactive__inner {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.usp-interactive__visual {
display: block;
margin-left: var(--toggler--gap);
width: 100%;
&:before {
content: '';
display: block;
height: 0;
padding-top: 73.58%;
width: 100%;
}
}
&--reversed {
.togglers {
padding-left: var(--toggler--gap);
order: 2;
}
.toggler {
&__visual {
left: auto;
right: calc(var(--toggler--width) + var(--toggler--gap));
}
}
}
}
@media screen and (min-width: 1140px) {
.toggler__visual {
width: calc(100% - var(--toggler--width) - var(--toggler--gap) + var(--usp-interactive-offset));
}
.usp-interactive__visual {
margin-right: calc(var(--usp-interactive-offset) * -1);
}
&--reversed {
.usp-interactive__visual {
margin-left: calc(var(--usp-interactive-offset) * -1);
margin-right: var(--toggler--gap);
}
}
}
@media screen and (min-width: 1440px) {
--usp-interactive-offset: calc((var(--section--9) - var(--section--8)) / 2);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
No notes defined.