Block

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-12-16" href="#" data-uid="69f0d0fba6fbc" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba706c" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/15/680/1000" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba714f" data-component="typography">
    Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba71fa" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba7191" data-component="typography">
    Nibh Dolor Bibendum Vehicula Amet
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba7251" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba728a" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/16/680/1000" 
    alt=""
    
></div>                    </figure>
    

    
                <!-- datebadge.blade.php -->
<div class="c-datebadge u-margin--3 u-absolute--top-left@sm u-absolute--top-left@md u-absolute--top-left@lg u-absolute--top-left@xl u-level-1 c-datebadge--md c-datebadge--light" data-uid="69f0d0fba7601" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d0fba76d6" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d0fba7649" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d0fba767d" data-component="typography">
    28
</span>
    </div>
</div>    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba770d" data-component="typography">
    Malesuada Parturient Dolor
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba7770" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba773e" data-component="typography">
    Nulla vitae elit libero, a pharetra augue
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba77b6" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba77eb" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/17/680/1000" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

                                <time class="c-date c-block__date" data-date="2026-04-28T15:23:00" datetime="2026-04-28T15:23:00" data-uid="69f0d0fba78cd" data-component="date">Tue 28 Apr 2026 </time>


            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba7908" data-component="typography">
    Porta Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba7966" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba7939" data-component="typography">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba79b3" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba79e4" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/18/680/1000" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba7a4d" data-component="typography">
    Nibh
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba7aa5" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba7a7a" data-component="typography">
    Maecenas faucibus mollis interdum
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba7ade" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba7b0b" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/19/680/1000" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba7b70" data-component="typography">
    Ornare Malesuada
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba7bc7" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba7b9d" data-component="typography">
    Curabitur blandit tempus porttitor
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nibh Dolor Bibendum Vehicula Amet',
            'ratio' => '12:16',
            'meta' => 'Ultricies',
            'image' => [
                'src' => 'https://picsum.photos/id/15/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nulla vitae elit libero, a pharetra augue',
            'ratio' => '12:16',
            'meta' => 'Malesuada Parturient Dolor',
            'image' => [
                'src' => 'https://picsum.photos/id/16/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'date' => date("Y-m-d H:i"),
            'dateBadge' => true
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
            'ratio' => '12:16',
            'meta' => 'Porta Ultricies',
            'image' => [
                'src' => 'https://picsum.photos/id/17/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'date' => date("Y-m-d H:i")
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Maecenas faucibus mollis interdum',
            'ratio' => '12:16',
            'meta' => 'Nibh',
            'image' => [
                'src' => 'https://picsum.photos/id/18/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Curabitur blandit tempus porttitor',
            'ratio' => '12:16',
            'meta' => 'Ornare Malesuada',
            'image' => [
                'src' => 'https://picsum.photos/id/19/680/1000',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-4-3" href="#" data-uid="69f0d0fba7feb" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba8035" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/10/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba80b5" data-component="typography">
    Etiam Tristique Magna Nullam
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba811e" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba80eb" data-component="typography">
    Justo Nibh Condimentum
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba8168" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba819b" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/11/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba8209" data-component="typography">
    Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba8269" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba823a" data-component="typography">
    Nulla vitae elit libero, a pharetra augue
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba82a5" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba82d6" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/12/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba8341" data-component="typography">
    Porta Risus Venenatis
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba839e" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba8371" data-component="typography">
    Nullam quis risus eget urna mollis ornare vel eu leo
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba83d9" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba840a" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/13/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba847e" data-component="typography">
    Adipiscing Fusce
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba84d5" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba84aa" data-component="typography">
    Justo Elit Tortor
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba850b" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba8557" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/14/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba85c3" data-component="typography">
    Euismod
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba8620" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba85f3" data-component="typography">
    Donec ullamcorper nulla non metus auctor fringilla
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Justo Nibh Condimentum',
            'meta' => 'Etiam Tristique Magna Nullam',
            'image' => [
                'src' => 'https://picsum.photos/id/10/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nulla vitae elit libero, a pharetra augue',
            'meta' => 'Ultricies',
            'image' => [
                'src' => 'https://picsum.photos/id/11/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nullam quis risus eget urna mollis ornare vel eu leo',
            'meta' => 'Porta Risus Venenatis',
            'image' => [
                'src' => 'https://picsum.photos/id/12/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Justo Elit Tortor',
            'meta' => 'Adipiscing Fusce',
            'image' => [
                'src' => 'https://picsum.photos/id/13/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Donec ullamcorper nulla non metus auctor fringilla',
            'meta' => 'Euismod',
            'image' => [
                'src' => 'https://picsum.photos/id/14/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

<div class="o-grid o-grid--no-gutter">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3 o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-4-3" href="#" data-uid="69f0d0fba8aed" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba8b31" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/88/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba8bae" data-component="typography">
    Parturient Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba8c16" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba8be4" data-component="typography">
    Purus Tellus
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba8c56" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba8c88" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/87/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba8cf5" data-component="typography">
    Nibh Sit
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba8d65" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba8d36" data-component="typography">
    Donec id elit non mi porta gravida at eget metus
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba8db6" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba8deb" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/32/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba8e5e" data-component="typography">
    Commodo Fringilla
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba8ec2" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba8e92" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba8f01" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba8f36" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/33/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba8fa8" data-component="typography">
    Ullamcorper Euismod Pharetra
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba900a" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba8fda" data-component="typography">
    Maecenas sed diam eget risus varius blandit sit amet non magna
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fba9049" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba907d" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/34/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba90ee" data-component="typography">
    Amet
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba9158" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba9128" data-component="typography">
    Pharetra Etiam
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>

<div class="o-grid o-grid--no-gutter">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3 o-grid-3@xl">
        @block([
            'heading' => 'Purus Tellus',
            'meta' => 'Parturient Ultricies',
            'image' => [
                'src' => 'https://picsum.photos/id/88/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Donec id elit non mi porta gravida at eget metus',
            'meta' => 'Nibh Sit',
            'image' => [
                'src' => 'https://picsum.photos/id/87/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'meta' => 'Commodo Fringilla',
            'image' => [
                'src' => 'https://picsum.photos/id/32/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Maecenas sed diam eget risus varius blandit sit amet non magna',
            'meta' => 'Ullamcorper Euismod Pharetra',
            'image' => [
                'src' => 'https://picsum.photos/id/33/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Pharetra Etiam',
            'meta' => 'Amet',
            'image' => [
                'src' => 'https://picsum.photos/id/34/680/510',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
            ]
        ])
        @endblock
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-12-16" href="#" data-uid="69f0d0fba961a" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba96a2" data-component="typography">
    Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba9713" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba96dd" data-component="typography">
    Nibh Dolor Bibendum Vehicula Amet
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba9755" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba97c0" data-component="typography">
    Malesuada Parturient Dolor
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba9825" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba97f4" data-component="typography">
    Nulla vitae elit libero, a pharetra augue
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba9864" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <div class="c-tags c-block__meta" id="69f0d0fba9912" data-uid="69f0d0fba9912" data-component="tags">
                                    <span class="c-tags__tag ">
                                            
                                        No label
                    
                </span>
                                                <span class="c-tags__tag ">
                                            
                                        No label
                    
                </span>
                                                <span class="c-tags__tag ">
                                            
                                        No label
                    
                </span>
                    
        
        </div>
                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba9998" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba9963" data-component="typography">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba99d7" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba9a40" data-component="typography">
    Nibh
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba9aa4" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba9a74" data-component="typography">
    Maecenas faucibus mollis interdum
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-12-16" data-uid="69f0d0fba9ae2" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fba9b49" data-component="typography">
    Ornare Malesuada
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fba9bab" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fba9b7b" data-component="typography">
    Curabitur blandit tempus porttitor
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nibh Dolor Bibendum Vehicula Amet',
            'ratio' => '12:16',
            'meta' => 'Ultricies',
            'link' => '#'
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nulla vitae elit libero, a pharetra augue',
            'ratio' => '12:16',
            'meta' => 'Malesuada Parturient Dolor',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
            'ratio' => '12:16',
            'meta' => ['Porta Ultricies', 'Malesuada Parturient Dolor', 'Ultricies'],
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Maecenas faucibus mollis interdum',
            'ratio' => '12:16',
            'meta' => 'Nibh',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Curabitur blandit tempus porttitor',
            'ratio' => '12:16',
            'meta' => 'Ornare Malesuada',
        ])
        @endblock
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-4-3" href="#" data-uid="69f0d0fba9f86" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fba9fc6" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/20/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbaa03d" data-component="typography">
    Etiam Tristique
</span>                                                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__secondarymeta c-typography__variant--secondarymeta" data-uid="69f0d0fbaa06e" data-component="typography">
    Magna Nullam
</span>                                        
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbaa0d3" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbaa0a5" data-component="typography">
    Justo Nibh Condimentum
</h2>
</div>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-block__content c-typography__variant--p" data-uid="69f0d0fbaa100" data-component="typography">
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
</p>            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fbaa13b" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbaa16b" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/21/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbaa1d2" data-component="typography">
    Porta Risus
</span>                                                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__secondarymeta c-typography__variant--secondarymeta" data-uid="69f0d0fbaa1fd" data-component="typography">
    Venenatis Adipiscing
</span>                                        
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbaa266" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbaa239" data-component="typography">
    Nulla vitae elit libero
</h2>
</div>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-block__content c-typography__variant--p" data-uid="69f0d0fbaa293" data-component="typography">
    Aenean lacinia bibendum nulla sed consectetur.
</p>            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fbaa2cf" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbaa301" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/22/680/510" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbaa36c" data-component="typography">
    Commodo Fringilla
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbaa3c7" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbaa39b" data-component="typography">
    Nullam quis risus eget
</h2>
</div>            
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-block__content c-typography__variant--p" data-uid="69f0d0fbaa3f4" data-component="typography">
    Cras mattis consectetur purus sit amet fermentum.
</p>            
        </div>
        
    </div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Justo Nibh Condimentum',
            'meta' => 'Etiam Tristique',
            'secondaryMeta' => 'Magna Nullam',
            'content' => 'Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.',
            'image' => [
                'src' => 'https://picsum.photos/id/20/680/510',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nulla vitae elit libero',
            'meta' => 'Porta Risus',
            'secondaryMeta' => 'Venenatis Adipiscing',
            'content' => 'Aenean lacinia bibendum nulla sed consectetur.',
            'image' => [
                'src' => 'https://picsum.photos/id/21/680/510',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nullam quis risus eget',
            'meta' => 'Commodo Fringilla',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
            'image' => [
                'src' => 'https://picsum.photos/id/22/680/510',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
        ])
        @endblock
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-4-3" href="#" data-uid="69f0d0fbaa7f7" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbaa893" data-component="typography">
    Parturient Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbaaac5" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbaa8cd" data-component="typography">
    Nibh Dolor Bibendum
</h2>                                                        <div class="c-element u-display--flex   u-rounded--full u-detail-shadow-3 u-aspect-ratio--1-1" style="background-color: transparent;" data-uid="69f0d0fbaaa88" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-block__icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" data-material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0fbaaa3e" data-component="icon">
                    </span>
    </div>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-4-3" data-uid="69f0d0fbaab08" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbaab71" data-component="typography">
    Etiam Tristique
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbaac72" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbaaba4" data-component="typography">
    Porta Commodo Risus
</h2>                                                        <div class="c-element u-display--flex u-padding__x--1 u-padding__y--1 u-rounded--full u-detail-shadow-3 u-aspect-ratio--1-1" style="background-color: #ffffff;" data-uid="69f0d0fbaac31" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-block__icon c-icon--star c-icon--material c-icon--material-star material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" data-material-symbol="star" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0fbaabde" data-component="icon">
                    </span>
    </div>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-4-3" href="#" data-uid="69f0d0fbaacb2" data-component="block">
    
        <!-- image.blade.php -->
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbaad17" data-component="typography">
    Fringilla Commodo
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbaae1c" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbaad48" data-component="typography">
    Fusce Dapibus Tellus
</h2>                                                        <div class="c-element u-display--flex u-padding__x--1 u-padding__y--1 u-rounded--full u-detail-shadow-3 u-aspect-ratio--1-1" style="background-color: #f0f0f0;" data-uid="69f0d0fbaade8" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-block__icon c-icon--place c-icon--material c-icon--material-place material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" data-material-symbol="place" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0fbaada4" data-component="icon">
                    </span>
    </div>
</div>            
            
        </div>
        
    </a>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nibh Dolor Bibendum',
            'meta' => 'Parturient Ultricies',
            'icon' => [
                'icon' => 'home',
                'size' => 'md',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Porta Commodo Risus',
            'meta' => 'Etiam Tristique',
            'icon' => [
                'icon' => 'star',
                'size' => 'md',
            ],
            'iconBackgroundColor' => '#ffffff',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Fusce Dapibus Tellus',
            'meta' => 'Fringilla Commodo',
            'icon' => [
                'icon' => 'place',
                'size' => 'md',
            ],
            'iconBackgroundColor' => '#f0f0f0',
            'link' => '#',
        ])
        @endblock
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-6@lg">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-16-9" href="#" data-uid="69f0d0fbab2c1" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbab2fe" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/25/1280/720" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbab367" data-component="typography">
    Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbab3bd" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbab394" data-component="typography">
    Nibh Dolor Bibendum Vehicula Amet
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-6@lg">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-16-9" data-uid="69f0d0fbab3f4" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbab42a" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/26/1280/720" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbab48c" data-component="typography">
    Malesuada Parturient
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbab4dc" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbab4b5" data-component="typography">
    Nulla vitae elit libero, a pharetra augue
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-6@lg">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-16-9" data-uid="69f0d0fbab50f" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbab538" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/27/1280/720" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbab592" data-component="typography">
    Porta Risus Venenatis
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbab5e0" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbab5ba" data-component="typography">
    Nullam quis risus eget urna mollis ornare
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-6@lg">
        @block([
            'heading' => 'Nibh Dolor Bibendum Vehicula Amet',
            'ratio' => '16:9',
            'meta' => 'Ultricies',
            'image' => [
                'src' => 'https://picsum.photos/id/25/1280/720',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-6@lg">
        @block([
            'heading' => 'Nulla vitae elit libero, a pharetra augue',
            'ratio' => '16:9',
            'meta' => 'Malesuada Parturient',
            'image' => [
                'src' => 'https://picsum.photos/id/26/1280/720',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-6@lg">
        @block([
            'heading' => 'Nullam quis risus eget urna mollis ornare',
            'ratio' => '16:9',
            'meta' => 'Porta Risus Venenatis',
            'image' => [
                'src' => 'https://picsum.photos/id/27/1280/720',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
        ])
        @endblock
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<a class="c-block c-block--ratio-1-1" href="#" data-uid="69f0d0fbab988" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbab9c9" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/30/680/680" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbaba3d" data-component="typography">
    Etiam Tristique
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbaba9f" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbaba70" data-component="typography">
    Justo Nibh Condimentum
</h2>
</div>            
            
        </div>
        
    </a>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-1-1" data-uid="69f0d0fbabada" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbabb09" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/31/680/680" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbabb70" data-component="typography">
    Ultricies
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbabbca" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbabb9e" data-component="typography">
    Nulla vitae elit libero
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
            <!-- block.blade.php -->
<div class="c-block c-block--ratio-1-1" data-uid="69f0d0fbabc0b" data-component="block">
    
        <!-- image.blade.php -->
     
        <figure class="c-image c-block__image c-image--cover" data-uid="69f0d0fbabc3a" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/35/680/680" 
    alt=""
    
></div>                    </figure>
    

    
    
            <div class="c-block__body">

            
                                                    <!-- typography.blade.php   original: span -->
<span class="c-typography c-block__meta c-typography__variant--meta" data-uid="69f0d0fbabca0" data-component="typography">
    Porta Risus Venenatis
</span>                                                    
                            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="69f0d0fbabcf9" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-block__heading c-typography__variant--h2" data-uid="69f0d0fbabcce" data-component="typography">
    Nullam quis risus eget urna mollis ornare
</h2>
</div>            
            
        </div>
        
    </div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Justo Nibh Condimentum',
            'ratio' => '1:1',
            'meta' => 'Etiam Tristique',
            'image' => [
                'src' => 'https://picsum.photos/id/30/680/680',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
            'link' => '#',
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nulla vitae elit libero',
            'ratio' => '1:1',
            'meta' => 'Ultricies',
            'image' => [
                'src' => 'https://picsum.photos/id/31/680/680',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
        ])
        @endblock
    </div>
    <div class="o-grid-12@xs o-grid-6@sm o-grid-4@md o-grid-3@lg o-grid-3@xl">
        @block([
            'heading' => 'Nullam quis risus eget urna mollis ornare',
            'ratio' => '1:1',
            'meta' => 'Porta Risus Venenatis',
            'image' => [
                'src' => 'https://picsum.photos/id/35/680/680',
                'alt' => 'ALT',
                'backgroundColor' => 'secondary',
            ],
        ])
        @endblock
    </div>
</div>