<div class="org-multi-column-block">
<div class="uhasselt-container">
<div class="column column-var">
<div class="col-span-3">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-span-9">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
<div class="column column-var">
<div class="col-span-4">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-span-8">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
<div class="column column-2">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
<img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
</div>
<div class="column column-3">
<div class="quote">
<div class="quote-inner">
<div class="text h3">Het is een erkenning voor ons onderzoeksteam dat zich al jaren inzet om de effecten van omgevingsfactoren op onze gezondheid in kaart te brengen.</div>
<div class="person h4">Prof. dr. Tim Nawrot</div>
</div>
<span class="icon fas fa-quote-right " aria-hidden="true"></span>
</div>
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
<img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
<div class="column column-4">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
<picture class="picture ">
<source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
<img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
</picture>
</div>
</div>
</div>
<div class="org-multi-column-block">
<div class="uhasselt-container">
<div class="column column-var">
<div class="col-span-3">
{{ render '@video' }}
</div>
<div class="col-span-9">
{{ render '@paragraph' }}
</div>
</div>
<div class="column column-var">
<div class="col-span-4">
{{ render '@video' }}
</div>
<div class="col-span-8">
{{ render '@paragraph' }}
</div>
</div>
<div class="column column-2">
{{ render '@paragraph' }}
{{ render '@image' }}
</div>
<div class="column column-3">
{{ render '@quote' }}
{{ render '@image' }}
{{ render '@paragraph' }}
</div>
<div class="column column-4">
{{ render '@paragraph' }}
{{ render '@video' }}
{{ render '@paragraph' }}
{{ render '@image' }}
</div>
</div>
</div>
/* No context defined. */
.org-multi-column-block {
@apply mb-16;
.column {
@apply grid;
@apply gap-8;
@apply mb-8;
}
.column-var {
@apply lg:grid-cols-12;
}
.column-2 {
@apply md:grid-cols-2;
}
.column-3 {
@apply md:grid-cols-2 lg:grid-cols-3;
}
.column-4 {
@apply md:grid-cols-2 lg:grid-cols-4;
}
h3.heading,
.heading.h3 {
@apply text-red;
}
.text-column {
&.red {
@apply bg-red p-8 shadow-xl;
@apply text-white;
a {
@apply text-white;
}
h3.heading,
.heading.h3 {
@apply text-black;
}
}
&.gray {
@apply bg-gray p-8 shadow-xl;
}
&.white {
@apply bg-white p-8 shadow-xl;
}
}
}
No notes defined.