/* .books-container { display: grid; grid-template-columns: 250px 1fr; gap: 30px; margin-top: 40px; } */
/* @media (max-width: 768px) { .books-container { grid-template-columns: 1fr; } } */

<main class="container">
    <div class="books-container" style="display: grid; grid-template-columns: 250px 1fr; gap: 30px; margin-top: 40px;">
        <aside class="filter-section">
            <h3>Categories</h3>
            <ul style="margin-top: 20px;">
                <li><input type="checkbox"> Fiction</li>
                <li><input type="checkbox"> Technology</li>
                <li><input type="checkbox"> Islamic Books</li>
                <li><input type="checkbox"> Children</li>
            </ul>
        </aside>

        <section class="book-listing">
            <div class="book-grid">
                </div>
        </section>
    </div>
</main>