<!-- Media gallery -->
<section class="bg-granite medium-padding">
    <header class="text-center">
        <div class="row column">
            <div class="section-header">
                <h1 class="section-heading">Media gallery</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum commodo habitant.</p>
            </div>
            <hr class="section-header-divider" />
        </div>
    </header>
    <div class="no-js-hide" style="display: block;" hidden="">
        <!-- Active embed item -->
        <div class="row column">
            <div class="flex-wrapper small-padding-top">
                <div class="single-item">
                    <figure>
                        <div class="embedded-media panoramas" id="active-embed">
                            <iframe title="Brendon Court bedroom" src="http://www.bath.ac.uk/360-image/index.html?360=12" allowfullscreen=""></iframe>
                        </div>
                        <figcaption id="active-embed-caption">Panorama F caption</figcaption>
                    </figure>
                </div>
            </div>
        </div>
        <div class="row column">
            <hr class="divider sub">
        </div>
        <!-- Embed items -->
        <header class="text-center small-padding-top">
            <div class="row column">
                <div class="section-header">
                    <h2 class="section-sub-heading">More panoramas</h2>
                </div>
            </div>
        </header>
        <div class="row column">
            <div class="flex-wrapper small-padding-top">
                <div class="media-embed-item text-center">
                    <a href="#" class="js-embed-select" data-embed-url="http://www.bath.ac.uk/360-image/index.html?360=7" data-caption="Panorama A caption">
                        <div class="media-embed-frame">
                            <div class="media-embed-thumbnail" style="background-image: url('https://www.bath.ac.uk/lens/110/assets/university-of-bath/images/style/360-overlay.png'), url('https://c1.staticflickr.com/5/4157/33975767244_0dc149489a_c.jpg');">
                                <!-- Thumbnail -->
                            </div>
                        </div>
                    </a>
                    <p>Panorama A caption</p>
                </div>
                <div class="media-embed-item text-center">
                    <a href="#" class="js-embed-select" data-embed-url="http://www.bath.ac.uk/360-image/index.html?360=6" data-caption="Panorama B caption">
                        <div class="media-embed-frame">
                            <div class="media-embed-thumbnail" style="background-image: url('https://www.bath.ac.uk/lens/110/assets/university-of-bath/images/style/360-overlay.png'), url('https://c1.staticflickr.com/5/4164/34686185261_4531cdee35_c.jpg');">
                                <!-- Thumbnail -->
                            </div>
                        </div>
                    </a>
                    <p>Panorama B caption</p>
                </div>
                <div class="media-embed-item text-center">
                    <a href="#" class="js-embed-select" data-embed-url="http://www.bath.ac.uk/360-image/index.html?360=9" data-caption="Panorama C caption">
                        <div class="media-embed-frame">
                            <div class="media-embed-thumbnail" style="background-image: url('https://www.bath.ac.uk/lens/110/assets/university-of-bath/images/style/360-overlay.png'), url('https://c1.staticflickr.com/5/4202/33975768634_cb44d09b03_c.jpg');">
                                <!-- Thumbnail -->
                            </div>
                        </div>
                    </a>
                    <p>Panorama C caption</p>
                </div>
                <div class="media-embed-item text-center">
                    <a href="#" class="js-embed-select" data-embed-url="http://www.bath.ac.uk/360-image/index.html?360=10" data-caption="Panorama D caption">
                        <div class="media-embed-frame">
                            <div class="media-embed-thumbnail" style="background-image: url('https://www.bath.ac.uk/lens/110/assets/university-of-bath/images/style/360-overlay.png'), url('https://c1.staticflickr.com/5/4170/33975768394_ed732f57bc_c.jpg');">
                                <!-- Thumbnail -->
                            </div>
                        </div>
                    </a>
                    <p>Panorama D caption</p>
                </div>
                <div class="media-embed-item text-center">
                    <a href="#" class="js-embed-select" data-embed-url="http://www.bath.ac.uk/360-image/index.html?360=11" data-caption="Panorama E caption">
                        <div class="media-embed-frame">
                            <div class="media-embed-thumbnail" style="background-image: url('https://www.bath.ac.uk/lens/110/assets/university-of-bath/images/style/360-overlay.png'), url('https://farm5.staticflickr.com/4642/24163134027_8a5b225bbb_z_d.jpg');">
                                <!-- Thumbnail -->
                            </div>
                        </div>
                    </a>
                    <p>Panorama E caption</p>
                </div>
                <div class="media-embed-item text-center active-item">
                    <a href="#" class="js-embed-select" data-embed-url="http://www.bath.ac.uk/360-image/index.html?360=12" data-caption="Panorama F caption">
                        <div class="media-embed-frame">
                            <div class="media-embed-thumbnail" style="background-image: url('https://c1.staticflickr.com/5/4156/34655888342_43f633847d_c.jpg');">
                                <!-- Thumbnail -->
                            </div>
                        </div>
                    </a>
                    <p>Panorama F caption</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Display if JavaScript is unavailable -->
    <noscript>
        <div class="row column">
            <div class="flex-wrapper small-padding-top">
                <div class="single-item">
                    <div class="embedded-media-nojs text-center">
                        <h1>This feature needs JavaScript</h1>
                        <img src="https://www.bath.ac.uk/lens/110/assets/university-of-bath/images/style/embed-missing.svg" alt="">
                        <p><strong>It looks like JavaScript isn't working.</strong></p>
                        <p>Try refreshing the page to fix the problem. If that doesn't work, check your browser settings in case JavaScript has been disabled.</p>
                    </div>
                </div>
            </div>
        </div>
    </noscript>
</section>