<div class="spacer spacer--6"></div>
<section class="hero-product">
<div class="hero-product__in">
<div class="hero-product__inner">
<div class="hero-product__media">
<section class="media media--slider">
<div class="media__slider swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="media__slide">
<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="swiper-slide">
<div class="media__slide">
<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="swiper-slide">
<div class="media__slide">
<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>
</div>
<div class="media__thumbs swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="media__thumb">
<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="swiper-slide">
<div class="media__thumb">
<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="swiper-slide">
<div class="media__thumb">
<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>
<div class="media__nav">
<div class="media__nav__item">
<a class="media__nav__link media__nav__link--prev">
<span class="media__nav__icon">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</a>
</div>
<div class="media__nav__item">
<a class="media__nav__link media__nav__link--next">
<span class="media__nav__icon">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</a>
</div>
</div>
</div>
</section>
</div>
<div class="hero-product__content">
<div class="hero-product__back caption">
<a href="#" class="link link--underlined">
<span class="link__label">< DJ Players</span>
</a>
</div>
<div class="hero-product__intro">
<h1 class="hero-product__heading heading">VM-50</h1>
<div class="hero-product__description">
Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Ullam similique, repellat aperiam expedita.
</div>
<div class="hero-product__cross-links">
<span class="hero-product__cross-link">
<a href="" class="link link--underlined">
<span class="link__label">VM-70</span>
</a>
</span>
<span class="hero-product__cross-link">
<a href="" class="link link--underlined">
<span class="link__label">VM-80</span>
</a>
</span>
</div>
</div>
<div class="hero-product__info">
<h2 class="hero-product__subheading heading">Lorem ipsum dolor sit, amet consectetur.</h2>
<div class="hero-product__description p--2">
Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Facilis molestiae placeat rem ratione in, dolores nemo quas a voluptas itaque veniam aspernatur cupiditate? Minima asperiores, eaque illo sunt dolor, fuga?
</div>
</div>
<div class="hero-product__colors">
</div>
<div class="hero-product__price">€xxxx</div>
<div class="hero-product__actions">
<div class="actions actions--stack actions--force">
<div class="actions__item">
<a href="#" target="_blank" class="action--modal action action--normal action--on-light">
<span class="action__label">Buy now</span>
<span class="action__bg"></span>
</a>
</div>
<div class="actions__item">
<a href="#" class="link link--underlined link--icon-left">
<span class="link__icon">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
<span class="link__label">Find a store</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="spacer spacer--10"></div>
<div class="nav-in-page-v2">
<span class="nav-in-page-v2__anchor"></span>
<div class="nav-in-page-v2__inner">
<a href="#" class="nav-in-page-v2__label">
<span class="link__label">Overview</span>
<div class="link__icon"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</div>
</a>
<nav class="nav-in-page-v2__nav">
<ul class="nav-in-page-v2__nav-items">
<li class="nav-in-page-v2__nav-item">
<a href="#" class="nav-in-page-v2__link">
<span class="link__label">Overview</span>
</a>
</li>
<li class="nav-in-page-v2__nav-item">
<a href="#" class="nav-in-page-v2__link">
<span class="link__label">Videos</span>
</a>
</li>
<li class="nav-in-page-v2__nav-item">
<a href="#" class="nav-in-page-v2__link">
<span class="link__label">Specifications</span>
</a>
</li>
<li class="nav-in-page-v2__nav-item">
<a href="#" class="nav-in-page-v2__link">
<span class="link__label">Downloads</span>
</a>
</li>
</ul>
</nav>
<div class="nav-in-page-v2__actions">
<div class="nav-in-page-v2__actions-inner">
<span>€ 1999</span>
<a href="#" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
<a href="#" target="_blank" class="action action--normal action--on-light">
<span class="action__label">Buy now</span>
<span class="action__bg"></span>
</a>
</div>
</div>
</div>
</div>
<div class="spacer spacer--20"></div>
<div class="section-header section-header--centered">
<div class="section-header__inner section--8">
<h class="section-header__heading heading heading--">Heading</h>
</div>
</div>
<div class="spacer spacer--6"></div>
<section class="media media--full">
<div class="media__in">
<div class="media__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>
</section>
<div class="spacer spacer--20"></div>
<div class="section-header section-header--centered">
<div class="section-header__inner section--8">
<h class="section-header__heading heading heading--">Key features</h>
</div>
</div>
<div class="spacer spacer--6"></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 class="spacer spacer--20"></div>
<section class="media media--contained">
<div class="media__in">
<div class="media__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>
</section>
<div class="spacer spacer--20"></div>
<div class="section-header section-header--centered">
<div class="section-header__inner section--8">
<h class="section-header__heading heading heading--">Compare our VM speakers</h>
</div>
</div>
<div class="spacer spacer--10"></div>
<section class="comparison">
<div class="comparison__inner">
<div class="section--6">
<div class="comparison__in">
<div class="comparison__table">
<header class="comparison__header comparison__col">
<div class="comparison__head comparison__cell"></div>
<div class="comparison__content">
<div class="comparison__cell">
Woofer
</div>
<div class="comparison__cell">
Width
</div>
<div class="comparison__cell">
Height
</div>
<div class="comparison__cell">
Depth
</div>
<div class="comparison__cell">
Weight
</div>
<div class="comparison__cell">
Frequency Range
</div>
<div class="comparison__cell">
Maximum Sound Pressure
</div>
<div class="comparison__cell">
Amplifier Output
</div>
</div>
</header>
<div class="comparison__col">
<div class="comparison__head comparison__cell">
<picture class="comparison__visual">
<img class="comparison__image" src="https://via.placeholder.com/160x190">
</picture>
<div class="comparison__label">
<a href="" class="link link--underlined">
<span class="link__label">VM-50</span>
</a> / <a href="" class="link link--underlined">
<span class="link__label">VM-50-W</span>
</a>
</div>
</div>
<div class="comparison__content">
<div class="comparison__cell">
5.25" (133 mm) ARAMID CONE
</div>
<div class="comparison__cell">
198 mm
</div>
<div class="comparison__cell">
300 mm
</div>
<div class="comparison__cell">
256 mm
</div>
<div class="comparison__cell">
5.5 kg
</div>
<div class="comparison__cell">
40 Hz - 36 kHz
</div>
<div class="comparison__cell">
107 dB
</div>
<div class="comparison__cell">
Class D with 96kHz DSP<br>
LF: 30 W / 4 Ω<br>
HF: 30 W / 4 Ω
</div>
</div>
</div>
<div class="comparison__col">
<div class="comparison__head comparison__cell">
<picture class="comparison__visual">
<img class="comparison__image" src="https://via.placeholder.com/160x190">
</picture>
<div class="comparison__label">
<a href="" class="link link--underlined">
<span class="link__label">VM-70</span>
</a>
</div>
</div>
<div class="comparison__content">
<div class="comparison__cell">
6.5" (165 mm) ARAMID CONE
</div>
<div class="comparison__cell">
229 mm
</div>
<div class="comparison__cell">
341 mm
</div>
<div class="comparison__cell">
312 mm
</div>
<div class="comparison__cell">
7.7 kg
</div>
<div class="comparison__cell">
37 Hz - 36 kHz
</div>
<div class="comparison__cell">
112 dB
</div>
<div class="comparison__cell">
Class D with 96kHz DSP<br>
LF: 70 W / 4 Ω<br>
HF: 30 W / 4 Ω
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="comparison__actions">
<div class="section--6">
<div class="actions actions--force actions--end">
<div class="actions__item">
<a href="#" target="_blank" class="action action--normal action--on-light">
<span class="action__label">Full VM-50 specs</span>
<span class="action__bg"></span>
</a>
</div>
</div>
</div>
</div>
<div class="comparison__loader"></div>
</section>
<div class="spacer spacer--20"></div>
<section class="media media--grid">
<div class="media__in">
<div class="media__inner">
<div class="media__content">
<div class="media__item">
<div class="media__item__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="media__item">
<div class="media__item__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="media__item">
<div class="media__item__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="media__item">
<div class="media__item__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>
</div>
<div class="media__loadmore">
<a href="/media/data.json?page=" class="loadmore">
<span class="loadmore__icon">
<span class="icon-plus">
<span class="icon-plus__inner"></span>
</span>
</span>
<span class="loadmore__label">load more media</span>
</a>
</div>
</div>
</section>
<div class="spacer spacer--20"></div>
<div id="combine-with">
<section class="combine-with combine-with--carousel">
<div class="combine-with__in">
<div class="combine-with__header">
<div class="section-header">
<div class="section-header__inner section--8">
<h2 class="section-header__heading heading heading--4">Getting started</h2>
<div class="section-header__description">Everything to get the music going.</div>
</div>
</div>
</div>
<div class="combine-with__content">
<section class="carousel swiper-container">
<div class="swiper-wrapper">
<div class="carousel__slide swiper-slide">
<article class="product-snippet" data-initcolor="0">
<div class="product-snippet__header">
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF" class="lazyload" alt="">
</picture>
</a>
</div>
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
<a href="" class="link link--default">
<span class="link__label">DJM-V10</span>
</a>
</h4>
<span class="product-snippet__price">€ 1999</span>
<div class="product-snippet__description">
6-channel professional DJ mixer
</div>
</div>
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
<a href="" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
</div>
</div>
</article>
</div>
<div class="carousel__slide swiper-slide">
<article class="product-snippet" data-initcolor="0">
<div class="product-snippet__header">
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A" class="lazyload" alt="">
</picture>
</a>
</div>
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
<a href="" class="link link--default">
<span class="link__label">DJM-900NXS2</span>
</a>
</h4>
<span class="product-snippet__price">€ 1999</span>
<div class="product-snippet__description">
4-channel digital pro-DJ mixer
</div>
</div>
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
<a href="" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
</div>
</div>
</article>
</div>
<div class="carousel__slide swiper-slide">
<article class="product-snippet" data-initcolor="0">
<div class="product-snippet__header">
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/dj-sampler/djs-1000/djs-1000-main.png?h=250&w=400&hash=F3C1E27C7D0070B31A79A30C0D705EF6198D03F5" class="lazyload" alt="">
</picture>
</a>
</div>
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
<a href="" class="link link--default">
<span class="link__label">DJS-1000</span>
</a>
</h4>
<span class="product-snippet__price">€ 1999</span>
<div class="product-snippet__description">
Stand-alone DJ sampler
</div>
</div>
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
<a href="" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
</div>
</div>
</article>
</div>
<div class="carousel__slide swiper-slide">
<article class="product-snippet" data-initcolor="0">
<div class="product-snippet__header">
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/turntable/plx-1000/black/plx-1000-main-pdj.png?h=250&w=400&hash=E646125CBE3FF811A4E07568350613DFEC1AAF91" class="lazyload" alt="">
</picture>
</a>
</div>
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
<a href="" class="link link--default">
<span class="link__label">PLX-1000</span>
</a>
</h4>
<span class="product-snippet__price">€ 1999</span>
<div class="product-snippet__description">
High-torque direct drive professional turntable
</div>
</div>
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
<a href="" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
</div>
</div>
</article>
</div>
<div class="carousel__slide swiper-slide">
<article class="product-snippet" data-initcolor="0">
<div class="product-snippet__header">
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/headphones/hdj-x10/black/hdj-x10-k-main-if.png?h=250&w=400&hash=3252A2E5FF602607879F0840D7798FB219D3BFFB" class="lazyload" alt="">
</picture>
</a>
</div>
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
<a href="" class="link link--default">
<span class="link__label">HDJ-X10</span>
</a>
</h4>
<span class="product-snippet__price">€ 1999</span>
<div class="product-snippet__description">
Flagship professional over-ear DJ headphones
</div>
</div>
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
<a href="" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
</div>
</div>
</article>
</div>
<div class="carousel__slide swiper-slide">
<article class="product-snippet" data-initcolor="0">
<div class="product-snippet__header">
<div class="product-snippet__visual">
<a href="https://pioneerdj.com" class="product-snippet__image">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/software/rekordbox-6/rekordbox-6-main.png?h=250&w=400&hash=83507CBC778756790B427E663DC50A91C8565407" class="lazyload" alt="">
</picture>
</a>
</div>
</div>
<div class="product-snippet__content">
<h4 class="product-snippet__heading heading">
<a href="" class="link link--default">
<span class="link__label">rekordbox</span>
</a>
</h4>
<span class="product-snippet__price">€ 1999</span>
<div class="product-snippet__description">
DJ application
</div>
</div>
<div class="product-snippet__actions actions actions--start">
<div class="actions__item">
<a href="" class="link link--colored">
<span class="link__label">Buy now</span>
</a>
</div>
</div>
</article>
</div>
</div>
<nav class="carousel__nav">
<div class="carousel__nav__item">
<a class="carousel__nav__link carousel__nav__link--prev">
<span class="carousel__nav__icon">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</a>
</div>
<div class="carousel__nav__item">
<a class="carousel__nav__link carousel__nav__link--next">
<span class="carousel__nav__icon">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</a>
</div>
</nav>
</section>
</div>
</div>
</section>
</div>
<div class="spacer spacer--30"></div>
<!-- !!!!! For testing purposes only !!!!! -->
<div style="min-height:500vh;padding:var(--gutter--bucket);">Minimum screen width of 1200px and scroll down to test</div>
<!-- !!!!! / For testing purposes only !!!!! -->
<div class="back-to-top">
<div class="back-to-top__link">back to top <span class="back-to-top__arrow"></span></div>
</div>
<div class="spacer spacer--6"></div>
{{render '@hero-product' hero merge=true }}
<div class="spacer spacer--10"></div>
{{render '@nav-in-page-v2' }}
<div class="spacer spacer--20"></div>
{{render '@section-header' videoHeader }}
<div class="spacer spacer--6"></div>
{{render '@media' media }}
<div class="spacer spacer--20"></div>
{{render '@section-header' featuresHeader }}
<div class="spacer spacer--6"></div>
{{render '@col-two' feature1 merge=true }}
<div class="spacer spacer--4"></div>
{{render '@col-two' feature2 merge=true }}
<div class="spacer spacer--20"></div>
{{render '@media' visual }}
<div class="spacer spacer--20"></div>
{{render '@section-header' comparisonHeader }}
<div class="spacer spacer--10"></div>
{{render '@comparison' }}
<div class="spacer spacer--20"></div>
{{render '@media--grid' }}
<div class="spacer spacer--20"></div>
<div id="combine-with">
{{render '@combine-with' }}
</div>
<div class="spacer spacer--30"></div>
{{render '@back-to-top' }}
hero:
logo: false
intro:
heading: VM-50
description: >-
Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Ullam
similique, repellat aperiam expedita.
crossLinks:
- href: '#'
label: VM-70
modifier: underlined
- href: '#'
label: VM-80
modifier: underlined
info:
heading: Lorem ipsum dolor sit, amet consectetur.
description: >-
Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Facilis
molestiae placeat rem ratione in, dolores nemo quas a voluptas itaque
veniam aspernatur cupiditate? Minima asperiores, eaque illo sunt dolor,
fuga?
colors: false
price: €xxxx
action:
url: '#'
label: Buy now
videoHeader:
heading: Heading
description: false
modifier: centered
media:
type: full
video-player: true
featuresHeader:
heading: Key features
description: false
modifier: centered
feature1: null
feature2:
modifier: reversed
visual:
type: contained
visual: true
comparisonHeader:
heading: Compare our VM speakers
description: false
modifier: centered
No notes defined.