<div class="col-8 mx-auto p-4 rounded shadow-sm context-main-bg my-4">
    <h2 class="text-center mb-4">{SITENAME} Libraries</h2>
    <p class="lead">
        {SITENAME} uses a number of libraries developed in conjunction with the main project. Here you can find a list of these libraries with more information on each.
    </p>
    <hr>
    <div class="container px-4 py-5" id="custom-cards">
        <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
            <div class="col">
                <a href="/bedrock" class="text-decoration-none">
                    <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/bedrock.jpg');">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Bedrock</h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="/canary" class="text-decoration-none">
                    <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/canary.jpg');">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Canary</h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="/hermes" class="text-decoration-none">
                    <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/hermes.jpg');">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
                            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Hermes</h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="/houdini" class="text-decoration-none">
                    <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/houdini.jpg');">
                        <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                            <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Houdini</h3>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>