<section class="org-intro-block swapped">
<div class="vebego-container">
<div class="md:grid md:grid-cols-12 gap-8">
<div class="first col-span-5">
<div class="mol-title title-underline">
<span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>
<span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>
</div>
</div>
<div class="second md:col-start-8 md:col-end-13">
<div class="mol-intro-media">
<div class="intro-media-slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/231/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/232/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/234/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/235/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/236/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/237/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/238/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/239/768/768" alt="" loading="lazy">
</picture>
</div>
</div>
</div>
<div class="swiper-prev"><a class="atm-prev-next prev-next-prev" title="Vorige">
<span class="atm-icon fal fa-chevron-left fa-md "></span>
</a>
</div>
<div class="swiper-next"><a class="atm-prev-next prev-next-next" title="Volgende">
<span class="atm-icon fal fa-chevron-right fa-md "></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="org-intro-block swapped">
<div class="vebego-container">
<div class="md:grid md:grid-cols-12 gap-8">
<div class="first col-span-5">
{{render '@title' title merge=true}}
</div>
<div class="second md:col-start-8 md:col-end-13">
{{#if video}}
{{render '@intro-media--video'}}
{{else if slider}}
{{render '@intro-media--slider'}}
{{else if image}}
{{render '@intro-media--image'}}
{{/if}}
</div>
</div>
</div>
</div>
{
"heading": {
"text": "De schoonmakers van Nederland"
},
"paragraph": {
"text": "Maar schoonmaken is een vak apart. Elke dag zetten duizenden Hago-medewerkers zich graag in om een bijdrage te leveren aan een schoon Nederland. Wij zijn Hago, de schoonmakers van Nederland."
},
"slider": true
}
.org-intro-block {
@apply mb-24;
&.swapped {
@apply text-left;
.vebego-container {
@screen md {
grid-auto-flow: dense;
direction: rtl;
.first {
direction: initial;
grid-column: span 5 / span 4;
@apply pt-16;
}
.atm-heading, .atm-paragraph, .atm-button{
direction: ltr;
}
}
}
}
}
No notes defined.