<div class="usp-interactive usp-interactive--reversed">
    <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="&quot;https://videos.ctfassets.net/8cd2csgvqd3m/44F64RbvN7m273w1IfIGFj/3d1d03d94e5e519d4e371d32fa76c9a3/E8Sport_KSP_3_FIT_16-9_Home_desktop.mp4&quot;"></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
modifier: reversed
  • Content:
    .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; }
    }
    
  • URL: /components/raw/usp-interactive/usp-interactive.scss
  • Filesystem Path: ../src/04_organisms/usp-interactive/usp-interactive.scss
  • Size: 3 KB

No notes defined.