<section class="section-card-section">
<div class="container">
<div class="wrapper wrapper--four">
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
<article class="card-subsection">
<a href="#" class="outer-box">
<div class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<h3 class="h4">Sonorisation</h3>
</div>
</a>
</article>
</div>
</div>
</section>
<section class="section-card-section">
<div class="container">
{{#if section_card_section.title }}
<h3>{{section_card_section.title}}</h3>
{{/if}}
<div class="wrapper wrapper--four">
{{#each section_card_section.items }}
{{> @card-subsection card_section=this }}
{{/each}}
</div>
</div>
</section>
{
"section_card_section": {
"items": [
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"title": "Sonorisation",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
}
]
}
}
.section-card-section {
// .wrapper{
// display: flex;
// flex-flow: row wrap;
// margin-left: calc((var(--gap, 1rem) / 2) * -1);
// margin-right: calc((var(--gap, 1rem) / 2) * -1);
// article{
// flex: 1 0 calc(100% - var(--gap, 1rem));
// margin: calc(var(--gap, 1rem) / 2);
// max-width: calc(var(--flex-wmax-four, 100%) - var(--gap, 1rem));
// }
// }
}
There are no notes for this item.