<div class="js-component relative z-0 overflow-hidden component-spacer-margin">
<div class="container ">
<div class="text-center mb-10 lg:mb-16">
<div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">"It's a gamechanger"</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl max-w-screen-sm mx-auto">
<p>Cricket legend Darren Gough explains how Gigaclear's full fibre broadband makes rural life easier</p>
</div>
</div>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":false,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":3,"mediaQuery":"min","arrows":true,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"perPage":4,"mediaQuery":"min","arrows":true,"gap":"1.5rem","padding":{"right":"0rem"}}}}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
<div class="splide__slide">
<button data-micromodal-trigger="1" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-1@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-1@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
How important is broadband to you? (Standard)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="1" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="" data-next-id="2">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-xl m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg?v=1.2#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md " data-video-container>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/XiX8pZPLsGY?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="2">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="2" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-2@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-2@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
What was life like before Gigaclear? (Mobile/Short)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="2" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="1" data-next-id="3">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full max-w-[450px] m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg?v=1.2#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[9/16] mx-auto bg-black shadow-xl overflow-hidden rounded-md max-h-[calc(100vh-9.5rem)]" data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="1">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/FvssOT4EIU8?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="3">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="3" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-3@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-3@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
How long have you been with us? (Standard)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="3" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="2" data-next-id="4">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-xl m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg?v=1.2#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md " data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="2">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/XiX8pZPLsGY?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="4">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="4" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-1@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-1@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
What do you use broadband for? (Mobile/Short)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="4" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="3" data-next-id="5">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full max-w-[450px] m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg?v=1.2#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[9/16] mx-auto bg-black shadow-xl overflow-hidden rounded-md max-h-[calc(100vh-9.5rem)]" data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="3">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/FvssOT4EIU8?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="5">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="5" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-2@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-2@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
Lorem ipsum dolor sit amet? (timestamp)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="5" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="4" data-next-id="">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-xl m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg?v=1.2#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md " data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="4">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/XiX8pZPLsGY?start=12&autoplay=true" frameborder="0" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center w-auto xsm:w-100 mt-5 lg:mt-10">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-3">
<button class="group splide__arrow splide__arrow--prev w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="-rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center pl-5 lg:pl-8 pr-4">
<div class="w-full">
<div class="bg-bravo-800/20 rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-bravo-800 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if bgContrast %}
{% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
{% set bgClass = "component-spacer-margin" %}
{% endif %}
{% set buttonClass = "rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center" %}
<div class="js-component relative z-0 overflow-hidden {{bgClass}}">
<div class="container ">
{% render "@headline", headline %}
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
{% for item in videoList %}
<div class="splide__slide">
<button data-micromodal-trigger="{{ item.id }}" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
{% render "@image-frame", { src: item.image.src, srcSet: item.image.srcSet, width: item.image.width, height: item.image.height, xsmMax: item.image.xsmMax, smMax: item.image.smMax, mdMax: item.image.mdMax, modifier: 'transition ease-in-out duration-300 group-hover:scale-110' } %}
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
{% render "@icon", { name: "icon-play", modifier: 'fill-current w-4 h-4 relative -mr-1' } %}
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
{{ item.heading }}
</h2>
</button>
</div>
{% render "@video-modal", {
id: item.id,
aspect: item.videoAspect,
url: item.videoUrl,
prevId: videoList[loop.index0 - 1].id if loop.index0 > 0 else null,
nextId: videoList[loop.index0 + 1].id if not loop.last else null
} %}
{% endfor %}
</div>
</div>
<div class="flex items-center w-auto xsm:w-100 mt-5 lg:mt-10">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-3">
<button class="group splide__arrow splide__arrow--prev w-12 h-12 {{ buttonClass }} transition ease-in-out duration-300">
<div class="rotate-90">
{% render "@icon", { name: "icon-chevron", modifier: "w-5 h-3 relative fill-current -mb-0.5", ariaHidden: true } %}
</div>
<span class="sr-only text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-12 h-12 {{ buttonClass }} transition ease-in-out duration-300">
<div class="-rotate-90">
{% render "@icon", { name: "icon-chevron", modifier: "w-5 h-3 relative fill-current -mb-0.5", ariaHidden: true } %}
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center pl-5 lg:pl-8 pr-4">
<div class="w-full">
<div class="bg-bravo-800/20 rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-bravo-800 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"headline": {
"heading": "\"It's a gamechanger\"",
"summary": "Cricket legend Darren Gough explains how Gigaclear's full fibre broadband makes rural life easier"
},
"videoList": [
{
"id": 1,
"heading": "How important is broadband to you? (Standard)",
"videoUrl": "https://www.youtube.com/embed/XiX8pZPLsGY?autoplay=true",
"image": {
"src": "images/test-imagery/video-list-1@12-16@400w.png",
"width": 400,
"height": 533,
"srcSet": [
{
"url": "images/test-imagery/video-list-1@12-16@400w.png",
"size": "400"
}
]
}
},
{
"id": 2,
"heading": "What was life like before Gigaclear? (Mobile/Short)",
"videoUrl": "https://www.youtube.com/embed/FvssOT4EIU8?autoplay=true",
"videoAspect": "mobile",
"image": {
"src": "images/test-imagery/video-list-2@12-16@400w.png",
"width": 400,
"height": 533,
"srcSet": [
{
"url": "images/test-imagery/video-list-2@12-16@400w.png",
"size": "400"
}
]
}
},
{
"id": 3,
"heading": "How long have you been with us? (Standard)",
"videoUrl": "https://www.youtube.com/embed/XiX8pZPLsGY?autoplay=true",
"image": {
"src": "images/test-imagery/video-list-3@12-16@400w.png",
"width": 400,
"height": 533,
"srcSet": [
{
"url": "images/test-imagery/video-list-3@12-16@400w.png",
"size": "400"
}
]
}
},
{
"id": 4,
"heading": "What do you use broadband for? (Mobile/Short)",
"videoUrl": "https://www.youtube.com/embed/FvssOT4EIU8?autoplay=true",
"videoAspect": "mobile",
"image": {
"src": "images/test-imagery/video-list-1@12-16@400w.png",
"width": 400,
"height": 533,
"srcSet": [
{
"url": "images/test-imagery/video-list-1@12-16@400w.png",
"size": "400"
}
]
}
},
{
"id": 5,
"heading": "Lorem ipsum dolor sit amet? (timestamp)",
"videoUrl": "https://www.youtube.com/embed/XiX8pZPLsGY?start=12&autoplay=true",
"image": {
"src": "images/test-imagery/video-list-2@12-16@400w.png",
"width": 400,
"height": 533,
"srcSet": [
{
"url": "images/test-imagery/video-list-2@12-16@400w.png",
"size": "400"
}
]
}
}
],
"sliderData": {
"perPage": 1,
"mediaQuery": "min",
"pagination": false,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
},
"breakpoints": {
"768": {
"perPage": 3,
"mediaQuery": "min",
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "0rem"
}
},
"1024": {
"perPage": 4,
"mediaQuery": "min",
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "0rem"
}
}
}
}
}
No notes defined.