On Showcase
Carousel
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
The photo cannot be shown.
Source
<section data-kit-role="carousel" data-kit-fit="pending" id="hall-photos" aria-roledescription="carousel" aria-labelledby="hall-photos-line">
<div data-kit-region="strip" id="hall-photos-strip">
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="1 of 8">
<a id="hall-photos-1" href="#hall-photos-1-overlay"><img src="../carousel/hall-front.svg" alt="Front of the hall from the lane" width="1200" height="800"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="2 of 8">
<a id="hall-photos-2" href="#hall-photos-2-overlay" tabindex="-1"><img src="../carousel/main-hall.svg" alt="Main hall set with long tables" width="3000" height="750"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="3 of 8">
<a id="hall-photos-3" href="#hall-photos-3-overlay" tabindex="-1"><img src="../carousel/stage.svg" alt="Stage with its curtains open" width="900" height="1200"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="4 of 8">
<a id="hall-photos-4" href="#hall-photos-4-overlay" tabindex="-1"><img src="../carousel/kitchen.svg" alt="Kitchen counters and cupboards" width="1600" height="1200"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="5 of 8">
<a id="hall-photos-5" tabindex="-1"><img src="data:image/png;base64,Q29tbWl0dGVlIHJvb20=" alt="Committee room with chairs round a table" width="1200" height="900" hidden><span>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="6 of 8">
<a id="hall-photos-6" href="#hall-photos-6-overlay" tabindex="-1"><img src="../carousel/garden.svg" alt="Garden behind the hall" width="1920" height="1080"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="7 of 8">
<a id="hall-photos-7" href="#hall-photos-7-overlay" tabindex="-1"><img src="../carousel/porch.svg" alt="Porch at the main door" width="1000" height="1000"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="8 of 8">
<a id="hall-photos-8" href="#hall-photos-8-overlay" tabindex="-1"><img src="../carousel/car-park.svg" alt="Car park beside the hall" width="1500" height="1000"><span hidden>The photo cannot be shown.</span></a>
</div>
</div>
<span data-kit-region="line" id="hall-photos-line">8 photos of the hall</span>
<div data-kit-region="steps"><button type="button" aria-label="Previous" aria-controls="hall-photos-strip" data-kit-role="icon-action" data-kit-state="inert" data-kit-region="previous" disabled><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></button><button type="button" aria-label="Next" aria-controls="hall-photos-strip" data-kit-role="icon-action" data-kit-region="next"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></button></div>
</section>
<section data-kit-role="carousel" data-kit-fit="pending" id="room-photos" aria-roledescription="carousel" aria-labelledby="room-photos-line">
<div data-kit-region="strip" id="room-photos-strip">
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="1 of 4">
<a id="room-photos-1" href="#room-photos-1-overlay"><img src="../carousel/chairs.svg" alt="Chairs stacked along the wall" width="1200" height="800"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="2 of 4">
<a id="room-photos-2" href="#room-photos-2-overlay" tabindex="-1"><img src="../carousel/tables.svg" alt="Two tables laid for tea" width="1600" height="900"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="3 of 4">
<a id="room-photos-3" href="#room-photos-3-overlay" tabindex="-1"><img src="../carousel/dusk.svg" alt="The hall at dusk with its windows lit" width="2400" height="800"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="4 of 4">
<a id="room-photos-4" href="#room-photos-4-overlay" tabindex="-1" style="scroll-initial-target: nearest"><img src="../carousel/piano.svg" alt="Upright piano beside the stage" width="1000" height="1000"><span hidden>The photo cannot be shown.</span></a>
</div>
</div>
<span data-kit-region="line" id="room-photos-line">4 photos of the hall set for an event</span>
<div data-kit-region="steps"><button type="button" aria-label="Previous" aria-controls="room-photos-strip" data-kit-role="icon-action" data-kit-region="previous"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></button><button type="button" aria-label="Next" aria-controls="room-photos-strip" data-kit-role="icon-action" data-kit-state="inert" data-kit-region="next" disabled><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></button></div>
</section>
<section data-kit-role="carousel" data-kit-fit="pending" id="door-photos" aria-roledescription="carousel" aria-labelledby="door-photos-line">
<div data-kit-region="strip" id="door-photos-strip">
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="1 of 2">
<a id="door-photos-1" href="#door-photos-1-overlay"><img src="../carousel/noticeboard.svg" alt="Noticeboard inside the side door" width="600" height="800"><span hidden>The photo cannot be shown.</span></a>
</div>
<div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="2 of 2">
<a id="door-photos-2" href="#door-photos-2-overlay" tabindex="-1"><img src="../carousel/doorway.svg" alt="Side door from the path" width="600" height="800"><span hidden>The photo cannot be shown.</span></a>
</div>
</div>
<span data-kit-region="line" id="door-photos-line">2 photos of the side door</span>
<div data-kit-region="steps" hidden><button type="button" aria-label="Previous" aria-controls="door-photos-strip" data-kit-role="icon-action" data-kit-state="inert" data-kit-region="previous" disabled><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></button><button type="button" aria-label="Next" aria-controls="door-photos-strip" data-kit-role="icon-action" data-kit-region="next"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></button></div>
</section>
<div data-kit-role="image-overlay" id="hall-photos-1-overlay" tabindex="-1" aria-labelledby="hall-photos-1-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/hall-front.svg" width="1200" height="800" alt="Front of the hall from the lane">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-1-overlay-caption">Front of the hall<span>1 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#hall-photos-2-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/hall-front.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-1"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="hall-photos-2-overlay" tabindex="-1" aria-labelledby="hall-photos-2-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/main-hall.svg" width="3000" height="750" alt="Main hall set with long tables">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-2-overlay-caption">Main hall<span>2 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#hall-photos-1-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#hall-photos-3-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/main-hall.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-2"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="hall-photos-3-overlay" tabindex="-1" aria-labelledby="hall-photos-3-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/stage.svg" width="900" height="1200" alt="Stage with its curtains open">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-3-overlay-caption">Stage<span>3 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#hall-photos-2-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#hall-photos-4-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/stage.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-3"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="hall-photos-4-overlay" tabindex="-1" aria-labelledby="hall-photos-4-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/kitchen.svg" width="1600" height="1200" alt="Kitchen counters and cupboards">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-4-overlay-caption">Kitchen<span>4 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#hall-photos-3-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#hall-photos-6-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/kitchen.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-4"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="hall-photos-5-overlay" tabindex="-1" aria-labelledby="hall-photos-5-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="data:image/png;base64,Q29tbWl0dGVlIHJvb20=" width="1200" height="900" alt="Committee room with chairs round a table" hidden>
<span>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-5-overlay-caption">Committee room</figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="data:image/png;base64,Q29tbWl0dGVlIHJvb20="><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-5"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="hall-photos-6-overlay" tabindex="-1" aria-labelledby="hall-photos-6-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/garden.svg" width="1920" height="1080" alt="Garden behind the hall">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-6-overlay-caption">Garden<span>5 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#hall-photos-4-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#hall-photos-7-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/garden.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-6"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="hall-photos-7-overlay" tabindex="-1" aria-labelledby="hall-photos-7-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/porch.svg" width="1000" height="1000" alt="Porch at the main door">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-7-overlay-caption">Porch<span>6 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#hall-photos-6-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#hall-photos-8-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/porch.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-7"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="hall-photos-8-overlay" tabindex="-1" aria-labelledby="hall-photos-8-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/car-park.svg" width="1500" height="1000" alt="Car park beside the hall">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="hall-photos-8-overlay-caption">Car park<span>7 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#hall-photos-7-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#room-photos-1-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/car-park.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#hall-photos-8"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="room-photos-1-overlay" tabindex="-1" aria-labelledby="room-photos-1-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/chairs.svg" width="1200" height="800" alt="Chairs stacked along the wall">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="room-photos-1-overlay-caption">Stacked chairs<span>8 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#hall-photos-8-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#room-photos-2-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/chairs.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#room-photos-1"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="room-photos-2-overlay" tabindex="-1" aria-labelledby="room-photos-2-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/tables.svg" width="1600" height="900" alt="Two tables laid for tea">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="room-photos-2-overlay-caption">Tea tables<span>9 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#room-photos-1-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#room-photos-3-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/tables.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#room-photos-2"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="room-photos-3-overlay" tabindex="-1" aria-labelledby="room-photos-3-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/dusk.svg" width="2400" height="800" alt="The hall at dusk with its windows lit">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="room-photos-3-overlay-caption">Hall at dusk<span>10 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#room-photos-2-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#room-photos-4-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/dusk.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#room-photos-3"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="room-photos-4-overlay" tabindex="-1" aria-labelledby="room-photos-4-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/piano.svg" width="1000" height="1000" alt="Upright piano beside the stage">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="room-photos-4-overlay-caption">Piano<span>11 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#room-photos-3-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#door-photos-1-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/piano.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#room-photos-4"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="door-photos-1-overlay" tabindex="-1" aria-labelledby="door-photos-1-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/noticeboard.svg" width="600" height="800" alt="Noticeboard inside the side door">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="door-photos-1-overlay-caption">Noticeboard<span>12 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#room-photos-4-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<a data-kit-role="secondary-action" href="#door-photos-2-overlay"><span data-kit-region="label">Next</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/noticeboard.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#door-photos-1"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="door-photos-2-overlay" tabindex="-1" aria-labelledby="door-photos-2-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image">
<img src="../carousel/doorway.svg" width="600" height="800" alt="Side door from the path">
<span hidden>The photo cannot be shown.</span>
</div>
<figcaption data-kit-region="caption" id="door-photos-2-overlay-caption">Side door<span>13 of 13</span></figcaption>
<nav data-kit-region="actions" aria-label="Hall photos">
<a data-kit-role="secondary-action" href="#door-photos-1-overlay"><span data-kit-region="label">Previous</span></a>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
<a data-kit-role="secondary-action" href="../carousel/doorway.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#door-photos-2"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>