<section class="section-card-page container ">
<h2 class="h1">Nos services</h2>
<div class="section-card-page__listing">
<article class="card card-section">
<a href="#" title="Location" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Location</h3>
<p>Son, structure, vidéo, lumière, distribution, mobilier</p>
</div>
</a>
</article>
<article class="card card-section">
<a href="#" title="Événements" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Événements</h3>
<p>Conception, prestation, réalisation</p>
</div>
</a>
</article>
<article class="card card-section">
<a href="#" title="Mariage" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Mariage</h3>
<p>Animation, DJ, son lumière</p>
</div>
</a>
</article>
<article class="card card-section">
<a href="#" title="Mariage" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Mariage</h3>
<p>Animation, DJ, son lumière</p>
</div>
</a>
</article>
</div>
</section>
<section class="section-card-page container ">
<h2 class="h1">Nos services</h2>
<div class="section-card-page__listing">
{{#each section_card_page.items }}
{{> @card-section card_page=this }}
{{/each}}
</div>
</section>
{
"section_card_page": {
"title": "Nos services",
"items": [
{
"theme": "location",
"title": "Location",
"content": "<p>Son, structure, vidéo, lumière, distribution, mobilier</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"theme": "event",
"title": "Événements",
"content": "<p>Conception, prestation, réalisation</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"theme": "mariage",
"title": "Mariage",
"content": "<p>Animation, DJ, son lumière</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"theme": "mariage",
"title": "Mariage",
"content": "<p>Animation, DJ, son lumière</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
}
]
}
}
.section-card-page {
padding-top: 0;
@include mediaWQuery($media-query-m) {
padding-top: $margin-l;
}
&__listing {
@supports (display: flex) {
display: flex;
flex-wrap: wrap;
flex-direction: column;
--margin: 1rem;
--multiplier: calc(40rem - 100%);
@include mediaWQuery($media-query-s*1.5) {
margin: calc(var(--margin) * -1);
flex-direction: row;
}
@include mediaWQuery($media-query-m) {
--margin: 1rem;
}
> * {
width: 100%;
flex-grow: 1;
flex-basis: calc(var(--multiplier * 999));
margin-bottom: var(--margin);
margin-left: 0;
margin-right: auto;
@include mediaWQuery($media-query-s*1.5) {
width: auto;
min-width: calc(50% - (var(--margin) * 2));
max-width: calc(50% - (var(--margin) * 2));
margin: var(--margin);
}
}
}
}
}
There are no notes for this item.