<section class="media-gallery">
    <section class="text-block" role="region" aria-labelledby="gallery-with-24-images">
        <h2 id="gallery-with-24-images">Gallery with 24 images</h2>
        <p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University
            led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
    </section>

    <section class="media-gallery-images">

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>"
            href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

        <a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>                                                    &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-yellow button-small&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                            " href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
            data-sizes="(min-width: 40em) 80vw, 100vw">
                <img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                            </a>

    </section>

</section>
<section class="media-gallery">
    {% if ( title or content ) %}
        {% include '@text-block' with { 
            title: title,
            content: content
        } %}
    {% endif %}

    <section class="media-gallery-images">
        {% for image in images %}
      
            <a class="media-gallery-image-a"
                {% if image.caption %} 
                    data-sub-html="{{ image.caption }}{% if image.callToAction.label %}
                        {% filter escape %}
                            <p>{% include '@button' with {
                                label: image.callToAction.label,
                                href: image.callToAction.href,
                                size: 'small',
                                scheme: 'yellow'
                            } %}</p>
                        {% endfilter %}
                    {% endif %}"
                {% endif %} 
                {% if image.show360Icon %} data-iframe="true"{% endif %}
                href="{% if image.iframe %}{{ image.iframe | path }}{% else %}{{ image.path | path }}{% endif %}"
                {% if image.srcset %} data-srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}" data-sizes="(min-width: 40em) 80vw, 100vw"{% endif %}
            >
                <img class="media-gallery-image-a-img" src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} data-sizes="(min-width: 40em) 80vw, 100vw" alt="{{ image.alt }}" />
                <div class="media-gallery-image-a-overlay">
                    <i class="uod-icons uod-icons-search"></i>
                </div> 
                {% if image.show360Icon %}<i class="uod-icons uod-icons-360-view"></i>{% endif %}
            </a>
    
        {% endfor %}
    </section>

</section>
{
  "content": "<p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>",
  "title": "Gallery with 24 images",
  "images": [
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": null,
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": null
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    },
    {
      "path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
      "alt": "Rolling hills",
      "caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
      "callToAction": {
        "href": "#",
        "label": "Book your Open Day"
      },
      "iframe": null,
      "show360Icon": null,
      "srcset": [
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
          "width": 250
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
          "width": 400
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
          "width": 600
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
          "width": 900
        },
        {
          "path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
          "width": 1200
        }
      ]
    }
  ]
}
  • Content:
    import $ from 'jquery'
    import lightgallery from 'lightgallery'
    import '../../../node_modules/lg-video/dist/lg-video.min.js'
    
    $('.media-gallery-images').lightGallery({
        download: false,
        youtubePlayerParams: {
            modestbranding: 1,
            showinfo: 0,
            rel: 0,
            controls: 0
        },
    });
    
    
    
  • URL: /components/raw/media-gallery/media-gallery.js
  • Filesystem Path: components/components/media-gallery/media-gallery.js
  • Size: 312 Bytes
  • Content:
    .media-gallery{
        lost-column: 8/8;
        @include margin-medium;
    
        @include for-largerthan-ipad-portrait {
            lost-column: 16/16;
            @include margin-large;
        }
    
        @include for-desktop-up {
            lost-offset: 2/16;
            lost-column: 12/16;
        }
    
        > .text-block {
            @include margin-small;
    
            @include for-desktop-up {
                lost-offset: 1/12;
                lost-column: 10/12;
            }
        }
    
        &-images {
            display: flex;
            flex-wrap: wrap;
            lost-utility: clearfix;
    
            &:before{
                width: 0; //fixes bug in safari at certain browser widths
            }
        }
    
        &-image-a {
            lost-column: 4/8 2 10px;
            margin-bottom: 10px;
            position: relative;
            cursor: pointer;
    
            @include for-largerthan-ipad-portrait {
                lost-column: 4/16 4 10px;
            }
    
            @include for-desktop-up {
                lost-column: 3/12 4 10px;
            }
    
            &:hover {
                .media-gallery-image-a-overlay{
                    opacity: 1;
                    background-color: rgba($black, 0.65);
    
                    > i {
                        opacity: 1;
                    }
                }
            }
    
            &-img {
                max-width: 100%;
                display: block;
            }
    
            &-overlay {
                background-color: rgba($black, 0); 
                bottom: 0; 
                left: 0; 
                position: absolute; 
                right: 0; 
                top: 0; 
                transition: background-color 0.15s $default-animation-curve;
                z-index: 2;
    
                > i {
                    left: 50%;
                    margin-left: -17px;
                    margin-top: -17px;
                    opacity: 0;
                    position: absolute;
                    top: 50%;
                    font-size: 34px;
                    color: #FFFFFF;
                    transition: opacity 0.3s $default-animation-curve;
                }
            }
    
            .uod-icons-360-view {
                position: absolute;
                bottom: 10px;
                right: 10px;
                color: $white;
                font-size: responsive 40px 60px;
                font-range: $mobile-portrait $desktop;
                z-index: 1;
                text-shadow: rgba($black,0.5) 2px 2px 10px;
            }
        }
    }
     
    /*  Plugin style overrides */
        
    .lg-sub-html {
        background-color: rgba($black, .65);
        color: #ffffff;
    
        h1, h2, h3, h4, h5, h6 {
            color: $white;
            font-size: inherit;
        }
    
        @include for-largerthan-ipad-portrait {
    
            > p, > h1, > h2, > h3, > h4, > h5, h6 {
                max-width: 900px;
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
    
    .lg-toolbar .lg-close:after {
        @extend %uod-icons;
        content: $uod-icons-cross;
    }
    
    .lg-toolbar .lg-close {
       @include hover-rotate;
    }
    
    .lg-actions {
    
        .lg-prev {
            transform: rotate(90deg);
    
            &:after {
                @extend %uod-icons;
                content: $uod-icons-down-arrow;
            }
        }
    
        .lg-next {
            transform: rotate(90deg);
    
            &:before {
                @extend %uod-icons;
                content: $uod-icons-up-arrow;
            }
        }
    }
    
    
  • URL: /components/raw/media-gallery/media-gallery.scss
  • Filesystem Path: components/components/media-gallery/media-gallery.scss
  • Size: 3.1 KB

Media Gallery Component

A media gallery is a way of displaying images and iframed content. A gallery is made up of number of blocks, ideally in mulitples of 4.

An image in a media gallery can open to contain a static image, a Youtube video or other iframed content.

Options

  • A gallery can have a text block to act as an introduction

Properties

  • title [optional, string]
  • content [optional, block]
  • Images [required, Array of Image]

Image

  • caption [optional, string]
  • callToAction [optional, LinkObject]
  • iframe [optional, string(path)]
  • show360Icon [required, bool]
  • path [required, string(path)]
  • alt [required, string]
  • srcset [optional, Array of ResponsiveImage]

ResponsiveImage

  • image [required, string(path)]
  • width [required, number]