<section class="c-hero-carousel">
<div class="c-carousel u-position--relative ">
<div class="c-carousel__slides js-carousel__single-item">
<div class="c-carousel__item u-position--relative ">
<picture class="picture">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="//picsum.photos/1200/900" media="(min-width: 900px)">
<source srcset="//picsum.photos/900/675" media="(min-width: 700px)">
<source srcset="//picsum.photos/700/525" media="(min-width: 500px)">
<!--[if IE 9]></video><![endif]-->
<img itemprop="image" srcset="//picsum.photos/500/375" alt="Alt Text">
</picture>
<div class="c-carousel__item-text__wrap l-grid l-grid--7-col u-shift--left--1-col--at-large">
<div class="l-grid-item l-grid-item--m--4-col l-grid-item--xl--3-col">
<div class="c-carousel__item-text u-spacing u-padding--double--top u-padding--double--bottom">
<div class="c-carousel__item-text--inner u-spacing--half">
<h2 class="c-carousel__item-heading u-font--primary--xl">Proin dapibus</h2>
<h3 class="c-carousel__item-subtitle u-font--secondary--s u-text-transform--upper">
<strong>Fusce nec urna ut tellus accumsan fermentum.</strong>
</h3>
<div class="c-carousel__item-dek">
<p>Morbi eleifend, mi et varius imperdiet, nunc magna ullamcorper nibh, vel varius felis dui ac arcu. Vestibulum semper commodo dolor vel congue.</p>
</div>
<!-- /.c-carousel__item-dek -->
</div>
<a href="" class="c-carousel__item-cta o-button u-theme--secondary-background-color">Mec cursus mi</a>
</div>
<!-- /.c-carousel__item-text -->
</div>
</div>
</div>
<!-- /.c-carousel__item --> <div class="c-carousel__item u-position--relative ">
<picture class="picture">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="//picsum.photos/1200/900" media="(min-width: 900px)">
<source srcset="//picsum.photos/900/675" media="(min-width: 700px)">
<source srcset="//picsum.photos/700/525" media="(min-width: 500px)">
<!--[if IE 9]></video><![endif]-->
<img itemprop="image" srcset="//picsum.photos/500/375" alt="Alt Text">
</picture>
<div class="c-carousel__item-text__wrap l-grid l-grid--7-col u-shift--left--1-col--at-large">
<div class="l-grid-item l-grid-item--m--4-col l-grid-item--xl--3-col">
<div class="c-carousel__item-text carousel__item--right u-spacing u-padding--double--top u-padding--double--bottom">
<div class="c-carousel__item-text--inner u-spacing--half">
<h2 class="c-carousel__item-heading u-font--primary--xl">Quisque</h2>
<h3 class="c-carousel__item-subtitle u-font--secondary--s u-text-transform--upper">
<strong>Nulla rhoncus semper dolor et placerat.</strong>
</h3>
<div class="c-carousel__item-dek">
<p>Sed neque odio, iaculis iaculis rutrum quis, iaculis vitae est. Aenean arcu est, congue ut eleifend a, luctus ultrices odio. Etiam a dolor tortor. Nulla facilisi.</p>
</div>
<!-- /.c-carousel__item-dek -->
</div>
<a href="" class="c-carousel__item-cta o-button u-theme--secondary-background-color">Aenean tempor dolor</a>
</div>
<!-- /.c-carousel__item-text -->
</div>
</div>
</div>
<!-- /.c-carousel__item --> <div class="c-carousel__item u-position--relative ">
<picture class="picture">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="//picsum.photos/1200/900" media="(min-width: 900px)">
<source srcset="//picsum.photos/900/675" media="(min-width: 700px)">
<source srcset="//picsum.photos/700/525" media="(min-width: 500px)">
<!--[if IE 9]></video><![endif]-->
<img itemprop="image" srcset="//picsum.photos/500/375" alt="Alt Text">
</picture>
<div class="c-carousel__item-text__wrap l-grid l-grid--7-col u-shift--left--1-col--at-large">
<div class="l-grid-item l-grid-item--m--4-col l-grid-item--xl--3-col">
<div class="c-carousel__item-text u-spacing u-padding--double--top u-padding--double--bottom">
<div class="c-carousel__item-text--inner u-spacing--half">
<h2 class="c-carousel__item-heading u-font--primary--xl">Donec a gravida tellus</h2>
<h3 class="c-carousel__item-subtitle u-font--secondary--s u-text-transform--upper">
<strong>Ut mollis risus a ipsum maximus ullamcorper.</strong>
</h3>
<div class="c-carousel__item-dek">
<p>Fusce rhoncus commodo lectus eu pretium. Donec interdum erat ut felis iaculis, id auctor elit mattis.</p>
</div>
<!-- /.c-carousel__item-dek -->
</div>
<a href="" class="c-carousel__item-cta o-button u-theme--secondary-background-color">Mauris vel ornare metus</a>
</div>
<!-- /.c-carousel__item-text -->
</div>
</div>
</div>
<!-- /.c-carousel__item --> <div class="c-carousel__item u-position--relative ">
<picture class="picture">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="//picsum.photos/1200/900" media="(min-width: 900px)">
<source srcset="//picsum.photos/900/675" media="(min-width: 700px)">
<source srcset="//picsum.photos/700/525" media="(min-width: 500px)">
<!--[if IE 9]></video><![endif]-->
<img itemprop="image" srcset="//picsum.photos/500/375" alt="Alt Text">
</picture>
<div class="c-carousel__item-text__wrap l-grid l-grid--7-col u-shift--left--1-col--at-large">
<div class="l-grid-item l-grid-item--m--4-col l-grid-item--xl--3-col">
<div class="c-carousel__item-text u-spacing u-padding--double--top u-padding--double--bottom">
<div class="c-carousel__item-text--inner u-spacing--half">
<h2 class="c-carousel__item-heading u-font--primary--xl">Donec interdum erat</h2>
<h3 class="c-carousel__item-subtitle u-font--secondary--s u-text-transform--upper">
<strong>Nulla rhoncus semper dolor et placerat.</strong>
</h3>
<div class="c-carousel__item-dek">
<p>Mauris vel ornare metus. Donec rutrum arcu at erat pellentesque, vel euismod mi scelerisque. Nunc faucibus urna vel tristique volutpat. Praesent non libero sit amet neque feugiat condimentum.</p>
</div>
<!-- /.c-carousel__item-dek -->
</div>
<a href="" class="c-carousel__item-cta o-button u-theme--secondary-background-color">Mec cursus mi</a>
</div>
<!-- /.c-carousel__item-text -->
</div>
</div>
</div>
<!-- /.c-carousel__item --> </div>
<!-- /.carousel__slides -->
</div>
<!-- /.c-carousel -->
</section> <!-- /.c-hero-carousel -->