No notes defined.
<!-- Default -->
<div class="workflowTeaser">
<div class="workflowTeaser-image">
<a class="workflowTeaser-image-link" href="#" title="Mehr erfahren!" tabindex="-1"></a>
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <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>
<div class="workflowTeaser-content">
<h3 class="workflowTeaser-heading">
<span class="kicker">
Thema
</span>
<span class="workflowTeaser-title">
<a href="#">
Ich bin der Titel
</a>
</span>
</h3>
<div class="workflowTeaser-description">
<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="workflowTeaser-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
</div>
<!-- With Subitems -->
<div class="workflowTeaser">
<div class="workflowTeaser-image">
<a class="workflowTeaser-image-link" href="#" title="Mehr erfahren!" tabindex="-1"></a>
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <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>
<div class="workflowTeaser-content">
<h3 class="workflowTeaser-heading">
<span class="kicker">
Thema
</span>
<span class="workflowTeaser-title">
<a href="#">
Ich bin der Titel
</a>
</span>
</h3>
<div class="workflowTeaser-description">
<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="workflowTeaser-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
<nav class="workflowTeaser-subitems">
<h4 class="workflowTeaser-subitems-title">Ich bin der Titel für die Unterpunkte</h4>
<ul class="workflowTeaser-subitems-list">
<li class="workflowTeaser-subitems-item is-clickable">
<h5 class=workflowTeaser-label>
Four loko disrupt jean shorts
</h5>
<div class="workflowTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="workflowTeaser-link">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</li>
<li class="workflowTeaser-subitems-item is-clickable">
<h5 class=workflowTeaser-label>
Hashtag four loko skateboard chillwave deep
</h5>
<div class="workflowTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</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="workflowTeaser-link">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</li>
<li class="workflowTeaser-subitems-item is-clickable">
<h5 class=workflowTeaser-label>
Bitters sartorial gastropub
</h5>
<div class="workflowTeaser-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
<div class="workflowTeaser-link">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</li>
</ul>
</nav>
</div>
<!-- With Two Subitems -->
<div class="workflowTeaser">
<div class="workflowTeaser-image">
<a class="workflowTeaser-image-link" href="#" title="Mehr erfahren!" tabindex="-1"></a>
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <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>
<div class="workflowTeaser-content">
<h3 class="workflowTeaser-heading">
<span class="kicker">
Thema
</span>
<span class="workflowTeaser-title">
<a href="#">
Ich bin der Titel
</a>
</span>
</h3>
<div class="workflowTeaser-description">
<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="workflowTeaser-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
<nav class="workflowTeaser-subitems">
<h4 class="workflowTeaser-subitems-title">Ich bin der Titel für die Unterpunkte</h4>
<ul class="workflowTeaser-subitems-list">
<li class="workflowTeaser-subitems-item is-clickable">
<h5 class=workflowTeaser-label>
Four loko disrupt jean shorts
</h5>
<div class="workflowTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="workflowTeaser-link">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</li>
<li class="workflowTeaser-subitems-item is-clickable">
<h5 class=workflowTeaser-label>
Hashtag four loko skateboard chillwave deep
</h5>
<div class="workflowTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</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="workflowTeaser-link">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</li>
</ul>
</nav>
</div>
<!-- With Single Subitems -->
<div class="workflowTeaser">
<div class="workflowTeaser-image">
<a class="workflowTeaser-image-link" href="#" title="Mehr erfahren!" tabindex="-1"></a>
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption" data-floating="true" data-hidden="true"><button tabindex="0"></button> <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>
<div class="workflowTeaser-content">
<h3 class="workflowTeaser-heading">
<span class="kicker">
Thema
</span>
<span class="workflowTeaser-title">
<a href="#">
Ich bin der Titel
</a>
</span>
</h3>
<div class="workflowTeaser-description">
<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="workflowTeaser-cta">
<a href="#" class="button"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Mehr erfahren!</span></a>
</div>
</div>
<nav class="workflowTeaser-subitems">
<h4 class="workflowTeaser-subitems-title">Ich bin der Titel für die Unterpunkte</h4>
<ul class="workflowTeaser-subitems-list">
<li class="workflowTeaser-subitems-item is-clickable">
<h5 class=workflowTeaser-label>
Four loko disrupt jean shorts
</h5>
<div class="workflowTeaser-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="workflowTeaser-link">
<a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</div>
</li>
</ul>
</nav>
</div>
<div class="workflowTeaser{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#if image}}
<div class="workflowTeaser-image">
{{#cta}}<a class="workflowTeaser-image-link" href="{{url}}" title="{{label}}"{{#target}} target="{{.}}"{{/target}} tabindex="-1"></a>{{/cta}}
{{#image}}
{{render '@figure' (contextData '@workflowteaser' this) merge=false}}
{{/image}}
</div>
{{/if}}
<div class="workflowTeaser-content">
{{#if title}}
<h3 class="workflowTeaser-heading">
{{#kicker}}
{{render '@kicker' (contextData '@workflowteaser' this) merge=true}}
{{/kicker}}
{{#if title}}
<span class="workflowTeaser-title">
{{#cta}}<a href="{{url}}" {{#target}} target="{{.}}"{{/target}}>{{/cta}}
{{{title}}}
{{#cta}}</a>{{/cta}}
</span>
{{/if}}
</h3>
{{/if}}
{{#description}}
<div class="workflowTeaser-description">
{{{.}}}
</div>
{{/description}}
{{#cta}}
<div class="workflowTeaser-cta">
{{render '@button--link' (contextData '@workflowteaser' this) merge=true}}
</div>
{{/cta}}
</div>
{{#subitems}}
<nav class="workflowTeaser-subitems">
{{#title}}<h4 class="workflowTeaser-subitems-title">{{{.}}}</h4>{{/title}}
{{#if items}}
<ul class="workflowTeaser-subitems-list">
{{#items}}
<li class="workflowTeaser-subitems-item{{#if link}} is-clickable{{/if}}">
{{#if label}}
<h5 class=workflowTeaser-label>
{{{label}}}
</h5>
{{/if}}
{{#description}}
<div class="workflowTeaser-description">{{{.}}}</div>
{{/description}}
{{#link}}
<div class="workflowTeaser-link">
{{render '@button--link' (contextData '@featurelist' this) merge=true}}
</div>
{{/link}}
</li>
{{/items}}
</ul>
{{/if}}
</nav>
{{/subitems}}
</div>
/* Default */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<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>\n",
"cta": {
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
}
}
/* With Subitems */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<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>\n",
"cta": {
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"subitems": {
"title": "Ich bin der Titel für die Unterpunkte",
"items": [
{
"label": "Four loko disrupt jean shorts",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"link": {
"is-icon-only": true,
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
},
{
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<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>\n",
"link": {
"is-icon-only": true,
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
},
{
"label": "Bitters sartorial gastropub",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
"link": {
"is-icon-only": true,
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
/* With Two Subitems */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<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>\n",
"cta": {
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"subitems": {
"title": "Ich bin der Titel für die Unterpunkte",
"items": [
{
"label": "Four loko disrupt jean shorts",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"link": {
"is-icon-only": true,
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
},
{
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<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>\n",
"link": {
"is-icon-only": true,
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
/* With Single Subitems */
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": null,
"copyright": {
"content": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"is-floating": true,
"is-hidden": true
}
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<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>\n",
"cta": {
"label": "Mehr erfahren!",
"url": "#",
"icon": {
"id": "arrow-right"
}
},
"subitems": {
"title": "Ich bin der Titel für die Unterpunkte",
"items": [
{
"label": "Four loko disrupt jean shorts",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"link": {
"is-icon-only": true,
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
@import "_workflowTeaser.styles";
.workflowTeaser {
@include stack-spacing(component);
@include box-padding();
background-color: $_backdrop-color;
@include border-radius(large);
.button,
.figure,
.kicker {
@include stack-spacing(0);
}
&-image {
@include border-radius(small);
overflow: hidden;
position: relative;
z-index: 1;
&-link {
display: block;
position: absolute;
inset: 0;
z-index: 1;
}
.figure-image {
pointer-events: none;
transition: $_transition-duration transform;
transform: scale(1);
}
.figure-copyright {
pointer-events: all;
}
a:hover ~ * .figure-image {
transform: scale($figure_action_scale);
transition-duration: $_transition-duration--in;
}
}
&-title {
@extend %heading;
display: block;
@include stack-spacing(0);
a {
color: inherit;
text-decoration: inherit;
}
}
&-description {
@include stack-spacing();
> :first-child {
@include stack-spacing(0);
}
}
&-cta {
@include stack-spacing(large);
}
&-link {
@include stack-spacing();
a {
&::after {
content: "";
position: absolute;
inset: 0;
}
}
}
&-label {
@include stack-spacing(0);
@include text-size(x-large);
font-weight: $_font-weight--bold;
a {
color: inherit;
text-decoration: inherit;
}
}
&-subitems {
margin-top: var(--bp-large);
&-title {
@extend %heading--subheading;
@include stack-spacing(0);
@include box-padding(default, margin-bottom);
@include box-padding(default, (padding-left, padding-right));
@include stack-spacing(small, padding-bottom);
border-bottom: $_border;
}
&-list {
@include stack-spacing(0);
list-style: none;
padding: 0;
}
&-item {
padding-top: var(--bp);
@include border-radius(small);
@include box-padding();
background-color: $_page-color;
align-self: start;
position: relative;
box-shadow: none;
transition: $_transition-duration;
transition-property: box-shadow;
&:not(:first-child) {
margin-top: var(--bp);
}
}
}
&-subitems-item.is-clickable:hover,
&-subitems-item:has(&-link:hover) {
box-shadow: var(--bs);
transition-duration: $_transition-duration--in;
}
@include not-on-desktop(){
padding: var(--bp-small) var(--bp-small) var(--bp);
&-content,
&-subitems {
padding-left: calc(var(--bp) - var(--bp-small));
padding-right: calc(var(--bp) - var(--bp-small));
}
}
@include only-on-desktop(){
display: flex;
column-gap: var(--bp);
flex-wrap: wrap;
@include box-padding();
> * {
flex: 1 0 auto;
width: calc(50% - .5 * var(--bp));
}
&-content {
@include box-padding(default, (padding-left, padding-right));
@include box-padding(large, (padding-top, padding-bottom));
}
&-heading {
@include stack-spacing(0);
}
&-subitems {
width: 100%;
&-list {
column-gap: var(--bp);
@include grid-flowbox($max-columns: 3);
}
// Two items
&-list:has(&-item:first-child:last-child),
&-list:has(&-item:last-child:nth-child(2)) {
column-gap: var(--bp);
@include grid-flowbox($max-columns: 2);
}
&-item:not(:first-child) {
@include stack-spacing(0);
}
// Single item
&-item:first-child:last-child {
grid-column: 1 / -1;
width: calc(50% - .5 * var(--bp));
}
}
}
}