<GroupOfItems
renderTemplate="carousel"
style={{'--progress-color': '#fff', '--font-family-h' : 'HapnaSlabSerif'}}
text={{description: { content: [variables.pass_desc1, variables.pass_desc2] } }}
items={[
{
key: 'pass-01',
image: {
desktop: {
previewSrc: variables.url + 'shepard.png',
},
mobile: {
previewSrc: variables.url + 'shepard-mobile.png',
},
ariaLabel: variables.pass1,
},
title: variables.pass1,
},
{
key: 'pass-02',
image: {
desktop: {
previewSrc: variables.url + 'faucheux.png',
},
mobile: {
previewSrc: variables.url + 'faucheux-mobile.png',
},
ariaLabel: variables.pass2,
},
title: variables.pass2,
},
{
key: 'pass-03',
image: {
desktop: {
previewSrc: variables.url + 'vest.png',
},
mobile: {
previewSrc: variables.url + 'vest-mobile.png',
},
ariaLabel: variables.pass3,
},
title: variables.pass3
},
{
key: 'pass-04',
image: {
desktop: {
previewSrc: variables.url + 'horse.png',
},
mobile: {
previewSrc: variables.url + 'horse-mobile.png',
},
ariaLabel: variables.pass4,
},
title: variables.pass4
},
{
key: 'pass-05',
image: {
desktop: {
previewSrc: variables.url + 'facepalm.png',
},
mobile: {
previewSrc: variables.url + 'facepalm-mobile.png',
},
ariaLabel: variables.pass5,
},
title: variables.pass5
},
]}
/>
</Grid>