<div class="m-2 m-lg-4">
    <div class="col-12 col-md-10 col-lg-8 mx-auto p-4 context-main-bg">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item">
					<a href="{ROOT_URL}libraries" class="text-decoration-none">
						Libraries
					</a>
				</li>
				<li class="breadcrumb-item active" aria-current="page">
					Canary
				</li>
			</ol>
		</nav>
        <div class="container col-xxl-8">
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="col-10 col-sm-8 col-lg-6 mx-auto mx-lg-0">
                    <img src="{ROOT_URL}images/canary.jpg" class="d-block mx-lg-auto img-fluid rounded" alt="Bootstrap Themes" width="700" height="300" loading="lazy">
                </div>
                <div class="col-lg-6">
                    <h1 class="display-5 fw-bold lh-1 mb-3">Canary</h1>
                    <p class="lead">
                        Canary is a library that allows {SITENAME} to add logs during execution. 
                        The resulting logs can be printed to the browser console in real-time, saved to a log file, or even used on-page for debugging.
                    </p>
                    <div class="d-flex justify-content-center justify-content-lg-start">
                        <a href="/libraries/canary/git" class="btn btn-primary px-3 btn-lg m-2">
                            Git
                        </a>
                        <a href="/libraries/canary/packagist" class="btn btn-outline-primary px-3 m-2 btn-lg">
                            Packagist
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <p class="text-center text-muted">
            For a list of recent changes, please check <a href="/libraries/canary/changes" class="text-decoration-none">here</a>.
        </p>
    </div>
</div>