<div>
<div class="row">
<div class="col-12">
<h2>Header</h2>
<h3>Subheader</h3>
</div>
</div>
<div class="grid-pages">
<div class="row grid-pages__row">
<div class="col-6 col-3@lg grid-pages__column">
<a href="http://matilda.biz" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=0" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=0" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=0" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=0" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Sit rem unde sapiente officiis sunt.</h3>
<div class="grid-pages__text">
<p>Voluptas molestiae dolores beatae vel dolorum veritatis. Sit eius nulla earum modi et. Natus voluptas et eveniet. Ut architecto eveniet quis ratione recusandae recusandae facere sed cupiditate. Veniam tempore sit iusto amet est doloremque quis dolores. Eum tempore non.</p>
</div>
</div>
</a>
</div>
<div class="col-6 col-3@lg grid-pages__column">
<a href="https://lola.org" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=1" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=1" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=1" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=1" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Qui est rem fugiat nihil aspernatur deserunt est rerum sed.</h3>
<div class="grid-pages__text">
<p>Quae non sint ducimus unde vitae. Veritatis ipsa et sint fugiat voluptates. Qui ad et atque corrupti eum accusantium.</p>
</div>
</div>
</a>
</div>
<div class="col-6 col-3@lg grid-pages__column">
<a href="https://brandyn.com" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=2" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=2" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=2" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=2" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Eveniet necessitatibus eligendi accusamus et dolorem.</h3>
<div class="grid-pages__text">
<p>Neque incidunt ut. Voluptas tenetur voluptas dignissimos voluptatibus excepturi iusto quas at repellat. Voluptate necessitatibus natus commodi repudiandae et ut. Quisquam ipsum qui ea quidem.</p>
</div>
</div>
</a>
</div>
<div class="col-6 col-3@lg grid-pages__column">
<a href="http://edgar.com" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=3" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=3" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=3" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=3" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Voluptatum et aut quaerat iste dicta quaerat sapiente excepturi maxime.</h3>
<div class="grid-pages__text">
<p>In velit consectetur quia fugit sit repudiandae. Ab provident possimus consequatur quae laudantium. Ut quas voluptatum voluptatibus ut et. Reiciendis similique ex assumenda excepturi. Ea odit illum voluptatum sit perferendis alias sint qui blanditiis. Eum pariatur ducimus omnis.</p>
</div>
</div>
</a>
</div>
<div class="col-6 col-3@lg grid-pages__column">
<a href="https://tiffany.biz" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=4" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=4" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=4" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=4" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Omnis et autem esse rem earum.</h3>
<div class="grid-pages__text">
<p>Maiores eum id ab ut. Aliquam dolore vel aut nemo voluptatum. Sunt commodi assumenda suscipit accusamus cum velit ut et. Nisi ex ad fugit beatae qui rem fugiat consequatur totam.</p>
</div>
</div>
</a>
</div>
<div class="col-6 col-3@lg grid-pages__column">
<a href="http://eric.com" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=5" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=5" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=5" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=5" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Fuga occaecati voluptates esse et.</h3>
<div class="grid-pages__text">
<p>Excepturi dolor dignissimos tempora perspiciatis optio est libero facilis quasi. Ea voluptas voluptas dicta. Officia velit facilis ea quod aut consectetur sequi provident. Et voluptatem ullam fuga dicta distinctio quia aut dolores. Voluptates nesciunt repellat. Voluptas harum omnis.</p>
</div>
</div>
</a>
</div>
<div class="col-6 col-3@lg grid-pages__column">
<a href="https://janessa.info" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=6" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=6" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=6" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=6" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Cupiditate necessitatibus eaque ea sequi.</h3>
<div class="grid-pages__text">
<p>Et eos nulla nam ut amet. Dolorem et et porro laudantium modi tempora corrupti a atque. Voluptatibus veniam ullam. Ut itaque sunt et laboriosam rem ut non voluptatem. Magni aliquid velit pariatur est beatae.</p>
</div>
</div>
</a>
</div>
<div class="col-6 col-3@lg grid-pages__column">
<a href="http://holly.info" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/206/116?random=7" media="(max-width: 28.688rem)">
<source srcset="https://picsum.photos/360/203?random=7" media="(max-width: 47.938rem)">
<source srcset="https://picsum.photos/232/131?random=7" media="(max-width: 63.938rem)">
<img src="https://picsum.photos/276/156?random=7" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">Libero aliquam ut ut tenetur fugiat porro pariatur.</h3>
<div class="grid-pages__text">
<p>Enim vitae voluptate nostrum ipsa. Corporis amet ut non earum consequatur rerum enim. Ut esse voluptatem et. Sint rerum quod cumque saepe in molestias laborum.</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-12">
<h2>Header</h2>
<h3>Subheader</h3>
</div>
</div>
<div class="grid-pages">
<div class="row grid-pages__row">
{{#each items as |item index|}}
{{#ifCond index '<' @root.columnAmount}}
{{> grid-pages-content
columns=@root.columnClasses
breakpointSm=@root.breakpoint.sm widthSm=@root.dimension.widthSm heightSm=@root.dimension.heightSm
breakpointMd=@root.breakpoint.md widthMd=@root.dimension.widthMd heightMd=@root.dimension.heightMd
breakpointLg=@root.breakpoint.lg widthLg=@root.dimension.widthLg heightLg=@root.dimension.heightLg
breakpointXl=@root.breakpoint.xl widthXl=@root.dimension.widthXl heightXl=@root.dimension.heightXl
}}
{{/ifCond}}
{{/each}}
</div>
</div>
</div>
{{#*inline "grid-pages-content"}}
<div class="{{columns}} grid-pages__column">
<a href="{{url}}" class="grid-pages__link">
<div class="grid-pages__content flex flex-column margin-bottom-md">
<div class="grid-pages__image-container margin-bottom-sm">
<picture>
<source srcset="https://picsum.photos/{{widthSm}}/{{heightSm}}?random={{@index}}"
media="(max-width: {{breakpointSm}})">
<source srcset="https://picsum.photos/{{widthMd}}/{{heightMd}}?random={{@index}}"
media="(max-width: {{breakpointMd}})">
<source srcset="https://picsum.photos/{{widthLg}}/{{heightLg}}?random={{@index}}"
media="(max-width: {{breakpointLg}})">
<img src="https://picsum.photos/{{widthXl}}/{{heightXl}}?random={{@index}}" alt="" class="grid-pages__image" />
</picture>
</div>
<h3 class="grid-pages__header">{{title}}</h3>
<div class="grid-pages__text">
<p>{{text}}</p>
</div>
</div>
</a>
</div>
{{/inline}}
{
"items": [
{
"title": "Sit rem unde sapiente officiis sunt.",
"text": "Voluptas molestiae dolores beatae vel dolorum veritatis. Sit eius nulla earum modi et. Natus voluptas et eveniet. Ut architecto eveniet quis ratione recusandae recusandae facere sed cupiditate. Veniam tempore sit iusto amet est doloremque quis dolores. Eum tempore non.",
"url": "http://matilda.biz"
},
{
"title": "Qui est rem fugiat nihil aspernatur deserunt est rerum sed.",
"text": "Quae non sint ducimus unde vitae. Veritatis ipsa et sint fugiat voluptates. Qui ad et atque corrupti eum accusantium.",
"url": "https://lola.org"
},
{
"title": "Eveniet necessitatibus eligendi accusamus et dolorem.",
"text": "Neque incidunt ut. Voluptas tenetur voluptas dignissimos voluptatibus excepturi iusto quas at repellat. Voluptate necessitatibus natus commodi repudiandae et ut. Quisquam ipsum qui ea quidem.",
"url": "https://brandyn.com"
},
{
"title": "Voluptatum et aut quaerat iste dicta quaerat sapiente excepturi maxime.",
"text": "In velit consectetur quia fugit sit repudiandae. Ab provident possimus consequatur quae laudantium. Ut quas voluptatum voluptatibus ut et. Reiciendis similique ex assumenda excepturi. Ea odit illum voluptatum sit perferendis alias sint qui blanditiis. Eum pariatur ducimus omnis.",
"url": "http://edgar.com"
},
{
"title": "Omnis et autem esse rem earum.",
"text": "Maiores eum id ab ut. Aliquam dolore vel aut nemo voluptatum. Sunt commodi assumenda suscipit accusamus cum velit ut et. Nisi ex ad fugit beatae qui rem fugiat consequatur totam.",
"url": "https://tiffany.biz"
},
{
"title": "Fuga occaecati voluptates esse et.",
"text": "Excepturi dolor dignissimos tempora perspiciatis optio est libero facilis quasi. Ea voluptas voluptas dicta. Officia velit facilis ea quod aut consectetur sequi provident. Et voluptatem ullam fuga dicta distinctio quia aut dolores. Voluptates nesciunt repellat. Voluptas harum omnis.",
"url": "http://eric.com"
},
{
"title": "Cupiditate necessitatibus eaque ea sequi.",
"text": "Et eos nulla nam ut amet. Dolorem et et porro laudantium modi tempora corrupti a atque. Voluptatibus veniam ullam. Ut itaque sunt et laboriosam rem ut non voluptatem. Magni aliquid velit pariatur est beatae.",
"url": "https://janessa.info"
},
{
"title": "Libero aliquam ut ut tenetur fugiat porro pariatur.",
"text": "Enim vitae voluptate nostrum ipsa. Corporis amet ut non earum consequatur rerum enim. Ut esse voluptatem et. Sint rerum quod cumque saepe in molestias laborum.",
"url": "http://holly.info"
}
],
"breakpoint": {
"sm": "28.688rem",
"md": "47.938rem",
"lg": "63.938rem"
},
"columnClasses": "col-6 col-3@lg",
"columnAmount": 8,
"dimension": {
"widthSm": 206,
"heightSm": 116,
"widthMd": 360,
"heightMd": 203,
"widthLg": 232,
"heightLg": 131,
"widthXl": 276,
"heightXl": 156
}
}
No notes defined.