No notes defined.
<!-- Default -->
<div class="mediaHighlightInset has-backdrop">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
<!-- Alternation -->
<div class="mediaHighlightInset has-backdrop is-alternation">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
<!-- Upright -->
<div class="mediaHighlightInset has-backdrop">
<figure class="figure" data-orientation="upright" style=" object-position: 80% 35%;">
<a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
<img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li>
</ul>
</div>
</div>
</div>
<!-- Upright (Alternation) -->
<div class="mediaHighlightInset has-backdrop is-alternation">
<figure class="figure" data-orientation="upright" style=" object-position: 80% 35%;">
<a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
<img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li>
</ul>
</div>
</div>
</div>
<!-- With Graphic -->
<div class="mediaHighlightInset has-backdrop">
<figure class="figure" data-intrinsic-ratio="true" style="">
<img class="figure-image" src="../../images/placeholder/flow-chart.svg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Abbildung mit freiem Seitenverhältnis (nur für Grafiken)</span><small class="figure-copyright">Quelle: Unbekannt</small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li>
</ul>
</div>
</div>
</div>
<!-- With Graphic -->
<div class="mediaHighlightInset has-backdrop is-alternation">
<figure class="figure" data-intrinsic-ratio="true" data-orientation="upright" style="">
<img class="figure-image" src="../../images/placeholder/flow-chart-upright.svg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Abbildung mit freiem Seitenverhältnis (nur für Grafiken)</span><small class="figure-copyright">Quelle: Unbekannt</small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li>
</ul>
</div>
</div>
</div>
<!-- Accent -->
<div class="mediaHighlightInset has-backdrop" data-theme="accent">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li>
</ul>
</div>
</div>
</div>
<!-- Dark -->
<div class="mediaHighlightInset has-backdrop" data-theme="dark">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
<li>Church-key vinyl pug cardigan</li>
<li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li>
</ul>
</div>
</div>
</div>
<!-- With CTA -->
<div class="mediaHighlightInset has-backdrop">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="mediaInset-cta">
<a href="#" class="button"><span class="button-label">Jetzt klicken!</span></a>
</div>
</div>
</div>
<!-- With CTA -->
<div class="mediaHighlightInset has-backdrop" data-theme="accent">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="mediaInset-cta">
<a href="#" class="button"><span class="button-label">Jetzt klicken!</span></a>
</div>
</div>
</div>
<!-- With CTA -->
<div class="mediaHighlightInset has-backdrop" data-theme="dark">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="mediaInset-cta">
<a href="#" class="button"><span class="button-label">Jetzt klicken!</span></a>
</div>
</div>
</div>
<!-- Without Description -->
<div class="mediaHighlightInset has-backdrop without-description">
<figure class="videoPlayer">
<div class="videoPlayer-video">
<video class="video" controls poster="../../videos/placeholder/dummy-video.jpg">
<source src="../../videos/placeholder/dummy-video.mp4" type="video/mp4" />
</video>
</div>
<figcaption class="videoPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="videoPlayer-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
</div>
</div>
<!-- Without Description -->
<div class="mediaHighlightInset has-backdrop without-description has-upright-figure">
<figure class="figure" data-orientation="upright" style=" object-position: 80% 35%;">
<a href="../../images/placeholder/dummy-image-square.jpg" target="_blank" title="Bild im ursprunglichen Format anzeigen …">
<img class="figure-image" src="../../images/placeholder/dummy-image-square.jpg" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
</div>
</div>
<div class="mediaHighlightInset has-backdrop{{#unless description}} without-description{{/unless}}{{#if has-upright-figure}} has-upright-figure{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#figure}}
{{render '@figure' (contextData '@mediahighlightinset' this) merge=true}}
{{/figure}}
{{#videoplayer}}
{{render '@videoplayer' (contextData '@mediahighlightinset' this) merge=false}}
{{/videoplayer}}
<div class="mediaHighlightInset-text">
{{#title}}
<h2 class="mediaHighlightInset-title">
{{{.}}}
</h2>
{{/title}}
{{#description}}
<div class="mediaHighlightInset-description">
{{{.}}}
</div>
{{/description}}
{{#cta}}
<div class="mediaInset-cta">
{{render '@button--link' (contextData '@teaserinset' this) merge=true}}
</div>
{{/cta}}
</div>
</div>
/* Default */
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
/* Alternation */
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>",
"modifier": "is-alternation"
}
/* Upright */
{
"figure": {
"src": "/images/placeholder/dummy-image-square.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"orientation": "upright",
"focuspoint": "80% 35%",
"link": {
"url": "/images/placeholder/dummy-image-square.jpg",
"target": "_blank",
"title": "Bild im ursprunglichen Format anzeigen …"
}
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li><li>Church-key vinyl pug cardigan</li><li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li></ul>"
}
/* Upright (Alternation) */
{
"figure": {
"src": "/images/placeholder/dummy-image-square.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"orientation": "upright",
"focuspoint": "80% 35%",
"link": {
"url": "/images/placeholder/dummy-image-square.jpg",
"target": "_blank",
"title": "Bild im ursprunglichen Format anzeigen …"
}
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li><li>Church-key vinyl pug cardigan</li><li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li></ul>",
"modifier": "is-alternation"
}
/* With Graphic */
{
"figure": {
"src": "/images/placeholder/flow-chart.svg",
"alt": "Alternative Bildbeschreibung",
"caption": "Abbildung mit freiem Seitenverhältnis (nur für Grafiken)",
"copyright": "Quelle: Unbekannt",
"intrinsic-ratio": true
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li><li>Church-key vinyl pug cardigan</li><li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li></ul>"
}
/* With Graphic */
{
"figure": {
"src": "/images/placeholder/flow-chart-upright.svg",
"alt": "Alternative Bildbeschreibung",
"caption": "Abbildung mit freiem Seitenverhältnis (nur für Grafiken)",
"copyright": "Quelle: Unbekannt",
"intrinsic-ratio": true,
"orientation": "upright"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li><li>Church-key vinyl pug cardigan</li><li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li></ul>",
"modifier": "is-alternation"
}
/* Accent */
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li><li>Church-key vinyl pug cardigan</li><li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li></ul>",
"theme": "accent"
}
/* Dark */
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li><li>Church-key vinyl pug cardigan</li><li>Biodiesel locavore PBR try-hard skateboard,<br>plaid 8-bit</li></ul>",
"theme": "dark"
}
/* With CTA */
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>",
"cta": {
"label": "Jetzt klicken!"
}
}
/* With CTA */
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>",
"theme": "accent",
"cta": {
"label": "Jetzt klicken!"
}
}
/* With CTA */
{
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>",
"theme": "dark",
"cta": {
"label": "Jetzt klicken!"
}
}
/* Without Description */
{
"figure": null,
"title": "Ich bin der Titel",
"description": null,
"videoplayer": {
"video": {
"poster": "/videos/placeholder/dummy-video.jpg",
"sources": [
{
"type": "video/mp4",
"src": "/videos/placeholder/dummy-video.mp4"
}
]
},
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>"
}
}
/* Without Description */
{
"figure": {
"src": "/images/placeholder/dummy-image-square.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"orientation": "upright",
"focuspoint": "80% 35%",
"link": {
"url": "/images/placeholder/dummy-image-square.jpg",
"target": "_blank",
"title": "Bild im ursprunglichen Format anzeigen …"
}
},
"title": "Ich bin der Titel",
"description": null,
"has-upright-figure": true
}
@import "_mediaHighlightInset.styles";
%mediaHighlightInset {
@include stack-spacing(section);
@include full-width-backdrop($set-padding: true);
& + & {
@include stack-spacing(0);
}
&:not([data-theme]) + &:not([data-theme]) {
padding-top: 0;
}
.figure,
.videoPlayer {
@include stack-spacing(0);
margin-left: auto;
margin-right: auto;
width: 100%;
}
&-text {
@include stack-spacing(large);
}
&-title {
@extend %heading;
@include stack-spacing(0);
}
&-description {
@extend %richtextBlock;
& > *:first-child {
@include stack-spacing(0);
}
}
.button {
@include stack-spacing(large);
}
@include not-on-desktop(){
.figure[data-orientation="upright"] {
width: (math.div(2, 3) * 100%);
}
}
@include only-on-desktop(){
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: $_grid-gutter;
position: relative;
.figure,
.videoPlayer {
grid-column: 2 / span 6;
grid-row: 1 / span 1;
}
.figure[data-orientation="upright"] {
grid-column: 3 / span 4;
}
.figure[data-orientation="upright"] ~ &-text {
grid-column: 7 / span 5;
}
&-description {
&:first-child {
@include stack-spacing(0);
}
}
&-text {
@include stack-spacing(0);
grid-column: 8 / span 5;
grid-row: 1 / span 1;
}
&.is-alternation {
.figure,
.videoPlayer {
grid-column: 6 / span 6;
}
.figure[data-orientation="upright"] {
grid-column: 6 / span 4;
}
%mediaHighlightInset-text {
grid-column: 1 / span 5;
}
&:has(.figure[data-orientation="upright"]) {
%mediaHighlightInset-text {
grid-column: 2 / span 5;
}
.figure {
grid-column: 7 / span 4;
}
}
}
&.without-description {
%mediaHighlightInset-text {
grid-column: 3 / span 8;
@include stack-spacing(default, margin-bottom);
}
.figure,
.videoPlayer {
grid-column: 3 / span 8;
grid-row: 2 / span 1;
}
.figure[data-orientation="upright"] {
width: get-columns-width(5, 8);
margin-right: auto;
}
&.has-upright-figure {
%mediaHighlightInset-text {
grid-column: 5 / span 6;
position: relative;
left: calc(-.5 * (100% + var(--gg)) * #{math.div(1, 6)});
}
}
}
}
@include not-on-desktop(){
padding: var(--bp-large) calc(var(--bp-large) - var(--pp));
}
}
.mediaHighlightInset {
@extend %mediaHighlightInset;
&-text {
@extend %mediaHighlightInset-text;
}
&-title {
@extend %mediaHighlightInset-title;
}
&-description {
@extend %mediaHighlightInset-description;
}
}