Performance Search Results

<div class="mt-4">
    <h1 class="text-uppercase fs-3">Results (101)</h1>
    <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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__comedy border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </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">
                    <header class="listing-card--header flex-grow-0 d-none d-sm-block">
                        <img class="img-fluid" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
                    </header>
                    <div class="listing-card--details listing-card--details__theatre border bg-white bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end flex-grow-1">
                        <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">Theatre</mark>
                        <h3 class="fw-bolder fs-4 mt-3 mx-2 mx-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">
                            <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>
                </article>
            </div>
        </div>
    </div>
</div>