<div class="m-2 m-lg-4">
    <div class="col-12 mx-5 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
        <h2 class="text-center mb-4">{SITENAME} Libraries</h2>
        <hr>
        <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>
        <div class="container p-2 p-md-4" id="custom-cards">
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 align-items-center justify-content-center g-2 g-md-4">
                <div class="col">
                    <a href="/libraries/bedrock" class="text-decoration-none">
                        <div class="card card-cover overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/bedrock.jpg'); height: 300px;">
                            <div class="d-flex flex-column p-2 p-md-3 p-lg-3">
                                <h3 class="h4 lh-1 fw-bold text-dark">Bedrock</h3>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <a href="/libraries/canary" class="text-decoration-none">
                        <div class="card card-cover overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/canary.jpg'); height: 300px;">
                            <div class="d-flex flex-column p-2 p-md-3 p-lg-3">
                                <h3 class="h4 lh-1 fw-bold text-dark">Canary</h3>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <a href="/libraries/hermes" class="text-decoration-none">
                        <div class="card card-cover overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/hermes.jpg'); height: 300px;">
                            <div class="d-flex flex-column p-2 p-md-3 p-lg-3">
                                <h3 class="h4 lh-1 fw-bold text-dark">Hermes</h3>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <a href="/libraries/houdini" class="text-decoration-none">
                        <div class="card card-cover overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/houdini.jpg'); height: 300px;">
                            <div class="d-flex flex-column p-2 p-md-3 p-lg-3">
                                <h3 class="h4 lh-1 fw-bold text-dark">Houdini</h3>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <a href="/libraries/ttp" class="text-decoration-none">
                        <div class="card card-cover overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('{ROOT_URL}images/logoLarge.jpg'); height: 300px;">
                            <div class="d-flex flex-column p-2 p-md-3 p-lg-3">
                                <h3 class="h4 lh-1 fw-bold text-light">The Tempus Project</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>