<div class="mt-4">
<h1 class="text-uppercase fs-3">Results (101)</h1>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h2 id="pagination-heading" class="visually-hidden">Pagination</h2>
<ul class="pager__items js-pager__items d-flex list-inline justify-content-center align-items-stretch">
<li class="pager__item list-inline-item pager__item--previous">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
<span class="visually-hidden">Previous page</span>
<span aria-hidden="true">
<svg class="flipped">
<use xlink:href="#arrow"></use>
</svg>
</span>
</a>
</li>
<li class="pager__item list-inline-item pager__item--first">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
<span class="visually-hidden">Page
</span>1
</a>
</li>
<li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
<span aria-hidden="true">
<svg>
<use xlink:href="#ellipsis"></use>
</svg>
</span>
</li>
<li class="pager__item list-inline-item">
<a class="text-decoration-none d-flex p-2 justify-content-center align-items-center rounded-circle" href="#" title="Go to page 130">
<span class="visually-hidden">
Page
</span>9</a>
</li>
<li class="pager__item list-inline-item is-active">
<a class="text-decoration-none d-flex p-2 justify-content-center align-items-center bg-primary rounded-circle" href="#" title="Current page" aria-current="page">
<span class="visually-hidden">
Page
</span>10</a>
</li>
<li class="pager__item list-inline-item">
<a class="text-decoration-none d-flex p-2 justify-content-center align-items-center rounded-circle" href="#" title="Go to page 132">
<span class="visually-hidden">
Page
</span>11</a>
</li>
<li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
<span aria-hidden="true">
<svg>
<use xlink:href="#ellipsis"></use>
</svg>
</span>
</li>
<li class="pager__item list-inline-item pager__item--last">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
<span class="visually-hidden">Page
</span>123
</a>
</li>
<li class="pager__item list-inline-item pager__item--next">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to next page" rel="next">
<span class="visually-hidden">Next page</span>
<span aria-hidden="true">
<svg>
<use xlink:href="#arrow"></use>
</svg>
</span>
</a>
</li>
</ul>
</nav>
<div class="mt-4 search-results">
<h2 class="h3 text-uppercase">1st August</h2>
<div class="mb-4">
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<h2 class="h3 text-uppercase">3rd August</h2>
<div class="mb-4">
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<h2 class="h3 text-uppercase">5th August</h2>
<div class="mb-4">
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<h2 class="h3 text-uppercase">6th August</h2>
<div class="mb-4">
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<a href="#" class="btn btn-primary align-self-end mx-2">Tickets</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="my-2 my-sm-3">
<article class="listing-card listing-card__performance search-row position-relative d-flex gap-sm-2 flex-row overflow-hidden">
<div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 d-flex flex-column justify-content-end flex-grow-1">
<mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
<div class="d-flex p-2 pe-0">
<header class="listing-card--header flex-grow-0">
<a href="#">
<img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
</a>
</header>
<div class="flex-grow-1 d-flex flex-column justify-content-end">
<h3 class="fw-bolder fs-4 ms-2 ms-sm-3 flex-grow-1">
<a href="#">Example Show Title</a>
</h3>
<p class="fw-bolder m-2 mx-sm-3 my-0">12:30</p>
<p class="mt-1 mx-2 mx-sm-3 flex-grow-1">Courtyard - Beside</p>
<div class="d-flex gap-2 align-items-end align-items-sm-center justify-content-between flex-column flex-sm-row">
<div>
<p class="fw-bolder m-2 mx-sm-3 my-0">
<span class="pe-2">Relaxed Performance</span>
<mark aria-label="Audio-Described" title="Audio-Described" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
AD
</mark> <mark aria-label="Captioned" title="Captioned" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CAP
</mark> <mark aria-label="Chilled" title="Chilled" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
CHILL
</mark> <mark aria-label="Relaxed" title="Relaxed" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
REL
</mark> <mark aria-label="Signed (Interpreted)" title="Signed (Interpreted)" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
BSL
</mark> <mark aria-label="Touch Tour" title="Touch Tour" class="performance-access-tag d-inline-block badge text-bg-dark rounded text-center fs-6 fw-bold align-middle m-0 py-0" data-bs-toggle="tooltip">
TT
</mark>
</p>
</div>
<div>
<span class="btn text-uppercase d-block align-self-end mx-2 bg-secondary text-primary text-nowrap">Sold out</span>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h2 id="pagination-heading" class="visually-hidden">Pagination</h2>
<ul class="pager__items js-pager__items d-flex list-inline justify-content-center align-items-stretch">
<li class="pager__item list-inline-item pager__item--previous">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
<span class="visually-hidden">Previous page</span>
<span aria-hidden="true">
<svg class="flipped">
<use xlink:href="#arrow"></use>
</svg>
</span>
</a>
</li>
<li class="pager__item list-inline-item pager__item--first">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
<span class="visually-hidden">Page
</span>1
</a>
</li>
<li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
<span aria-hidden="true">
<svg>
<use xlink:href="#ellipsis"></use>
</svg>
</span>
</li>
<li class="pager__item list-inline-item">
<a class="text-decoration-none d-flex p-2 justify-content-center align-items-center rounded-circle" href="#" title="Go to page 130">
<span class="visually-hidden">
Page
</span>9</a>
</li>
<li class="pager__item list-inline-item is-active">
<a class="text-decoration-none d-flex p-2 justify-content-center align-items-center bg-primary rounded-circle" href="#" title="Current page" aria-current="page">
<span class="visually-hidden">
Page
</span>10</a>
</li>
<li class="pager__item list-inline-item">
<a class="text-decoration-none d-flex p-2 justify-content-center align-items-center rounded-circle" href="#" title="Go to page 132">
<span class="visually-hidden">
Page
</span>11</a>
</li>
<li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
<span aria-hidden="true">
<svg>
<use xlink:href="#ellipsis"></use>
</svg>
</span>
</li>
<li class="pager__item list-inline-item pager__item--last">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
<span class="visually-hidden">Page
</span>123
</a>
</li>
<li class="pager__item list-inline-item pager__item--next">
<a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to next page" rel="next">
<span class="visually-hidden">Next page</span>
<span aria-hidden="true">
<svg>
<use xlink:href="#arrow"></use>
</svg>
</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="mt-4">
<h1 class="text-uppercase fs-3">Results (101)</h1>
{% render "@pager" %}
{% render "@search-results--performance" %}
{% render "@pager" %}
</div>
{
"is_front": false
}
No notes defined.