Media Collage: 3 Variant 

<div class="media-collage media-collage--3-variant" data-module="mediaCollage">
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-offset-1 medium-10">
                <div class="media-collage__images-outer-container">
                    <div class="media-collage__images-only-container">
                        <div class="media-collage__image media-collage__image3" style="background-image: url(/media/media-collage/puffin.png); --mobile-image: url(/media/media-collage/coast.png); --desktop-image: url('/media/media-collage/puffin.png');"></div>
                        <div class="media-collage__image media-collage__image4" style="background-image: url(/media/media-collage/castle.png); --mobile-image: url(/media/media-collage/puffin.png); --desktop-image: url('/media/media-collage/castle.png');"></div>
                    </div>
                    <div class="media-collage__images-with-caption-container">
                        <div class="media-collage__image media-collage__image1" style="background-image: url(/media/media-collage/coast.png); --mobile-image: url(/media/media-collage/castle.png); --desktop-image: url('/media/media-collage/coast.png');"></div>
                        <div class="media-collage__image media-collage__image2" style="--mobile-image: url(/media/media-collage/puffin.png);');"></div>
                        <div class="media-collage__caption">
                            <span class="media-collage__location-icon"></span>
                            <p class="media-collage__location">Cork</p>
                            <p class="media-collage__description">This is a caption</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="media-collage media-collage--{{simpleImages.length}}-variant" data-module="mediaCollage">
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-offset-1 medium-10">
                <div class="media-collage__images-outer-container">
                    <div class="media-collage__images-only-container">
                        <div class="media-collage__image media-collage__image3"
                             style="background-image: url({{simpleImages.1.src}}); --mobile-image: url({{simpleImages.0.src}}); --desktop-image: url('{{simpleImages.1.src}}');"></div>
                        <div class="media-collage__image media-collage__image4"
                             style="background-image: url({{simpleImages.2.src}}); --mobile-image: url({{simpleImages.1.src}}); --desktop-image: url('{{simpleImages.2.src}}');"></div>
                    </div>
                    <div class="media-collage__images-with-caption-container">
                        <div class="media-collage__image media-collage__image1"
                             style="background-image: url({{simpleImages.0.src}}); --mobile-image: url({{#if
                                     simpleImages.3.src}}{{simpleImages.3.src}}{{else}}{{simpleImages.2.src}}{{/if}}); --desktop-image: url('{{simpleImages.0.src}}');"></div>
                        {{#if simpleImages.3.src}}
                            <div class="media-collage__image media-collage__image2"
                                 style="background-image: url({{simpleImages.3.src}}); --mobile-image: url({{simpleImages.2.src}}); --desktop-image: url('{{simpleImages.3.src}}');"></div>
                        {{else}}
                            <div class="media-collage__image media-collage__image2"
                                 style="--mobile-image: url({{simpleImages.1.src}});');"></div>
                        {{/if}}
                        <div class="media-collage__caption">
                            {{#if caption.location}}<span class="media-collage__location-icon"></span>
                                <p class="media-collage__location">{{caption.location}}</p>{{/if}}
                            {{#if caption.description}}
                                <p class="media-collage__description">{{caption.description}}</p>{{/if}}
                            {{#if tags}}
                                {{> @cp-hashtags tags }}
                            {{/if}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "simpleImages": [
    {
      "src": "/media/media-collage/coast.png"
    },
    {
      "src": "/media/media-collage/puffin.png"
    },
    {
      "src": "/media/media-collage/castle.png"
    }
  ],
  "caption": {
    "location": "Cork",
    "description": "This is a caption"
  }
}

There are no notes for this item.