<div class="filter-results d-flex justify-content-center gap-3 flex-wrap">
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">Comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" src="/images/samples/show-image/macintyre-small-portrait.png" alt="Example image">
        </header>
        <div class="listing-card--details listing-card--details__family border bg-white position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__family me-auto">family</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__comedy me-auto">comedy</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
    <article class="listing-card listing-card__show position-relative flex-shrink-0 swiper-slide overflow-hidden">
        <header class="listing-card--header">
            <img class="w-100" 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 position-absolute bottom-0 start-0 end-0 pb-2 d-flex flex-column justify-content-end">
            <mark class="lozenge lozenge--programme lozenge--programme__theatre me-auto">theatre</mark>
            <h3 class="fw-bolder fs-4 mt-1 mx-2 flex-grow-1">Michael McIntyre's Big World Tour</h3>
            <p class="mt-1 mx-2 flex-grow-1"><small>Michael McIntyre's Big World Tour</small></p>
            <p class="text-uppercase m-2 my-0">Edinburgh</p>
            <p class="text-uppercase m-2 my-0">August (various)</p>
        </div>
        <a class="stretched-link" href="#">
            Book tickets for Michael McIntyre's Big World Tour
        </a>
    </article>
</div>
<div class="filter-results d-flex justify-content-center gap-3 flex-wrap">
  {% for i in range(0, 10) %}
  {% render "@listing-card" %}
  {% render "@listing-card" with { "genre": "theatre" } %}  
  {% render "@listing-card" with { "genre": "family" } %}
  {% render "@listing-card" with { "genre": "comedy" } %}
  {% render "@listing-card" with { "genre": "theatre" } %}  
  {% endfor %}
</div>
/* No context defined. */
  • Content:
    .filter-results {
      column-gap: 0.75rem !important;
      row-gap: 1.25rem !important;
    }
  • URL: /components/raw/filter-results/filter-results.scss
  • Filesystem Path: src/components/02-structures/filter/filter-results/filter-results.scss
  • Size: 84 Bytes

No notes defined.