components/layout/03-card-layout/03-card-layout--quarter.html

<div class="mzp-l-content mzp-l-card-quarter">
 {% render '@card--extra-small', { class: 'mzp-c-card-extra-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
 {% render '@card--extra-small', { class: 'mzp-c-card-extra-small mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
 {% render '@card--extra-small', { class: 'mzp-c-card-extra-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
 {% render '@card--extra-small', { class: 'mzp-c-card-extra-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', title: 'A short title', desc: 'A brief card description, just a single sentence.' } %}
</div>