<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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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="#" class="chevron">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>
<div class="mt-4 search-results">
<h2 class="h3 text-uppercase">1st August</h2>
<div class="mb-4">
{% for i in range(0, 3) %}
{% render "@search-row--performance" %}
{% endfor %}
</div>
<h2 class="h3 text-uppercase">3rd August</h2>
<div class="mb-4">
{% for i in range(0, 2) %}
{% render "@search-row--performance" %}
{% endfor %}
{% for i in range(0, 2) %}
{% render "@search-row--performance--sold-out" %}
{% endfor %}
</div>
<h2 class="h3 text-uppercase">5th August</h2>
<div class="mb-4">
{% for i in range(0, 4) %}
{% render "@search-row--performance" %}
{% endfor %}
</div>
<h2 class="h3 text-uppercase">6th August</h2>
<div class="mb-4">
{% for i in range(0, 3) %}
{% render "@search-row--performance" %}
{% endfor %}
{% for i in range(0, 5) %}
{% render "@search-row--performance--sold-out" %}
{% endfor %}
</div>
</div>
/* No context defined. */
No notes defined.