<div class="m-2 m-lg-4">
    <div class="context-main-bg container py-2 my-2 py-lg-4 my-lg-4">
        <h2 class="text-center mb-4">Frequently Asked Questions</h2>
        <hr>

        <!-- Table of Contents -->
        <div class="mb-4">
            <h2 class="h4 text-primary">General Questions</h2>
            <ul class="list-unstyled">
                <li><a href="#generalHeading1" class="text-decoration-none context-main" data-bs-toggle="collapse" data-bs-target="#collapse1">Does {SITENAME} work on mobile?</a></li>
                <li><a href="#generalHeading2" class="text-decoration-none context-main" data-bs-toggle="collapse" data-bs-target="#collapse2">Does {SITENAME} work on Mac/PC/Linux?</a></li>
                <li><a href="#generalHeading3" class="text-decoration-none context-main" data-bs-toggle="collapse" data-bs-target="#collapse3">How much does {SITENAME} cost?</a></li>
            </ul>
        </div>

        <!-- Accordion for General Questions -->
        <div class="accordion mb-5" id="generalAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header context-second-bg" id="generalHeading1">
                    <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                        Does {SITENAME} work on mobile?
                    </button>
                </h2>
                <div id="collapse1" class="accordion-collapse collapse" aria-labelledby="generalHeading1" data-bs-parent="#generalAccordion">
                    <div class="ml-5 accordion-body context-main context-other-bg" id="general1">
                        <span class="text-lead text-primary">
                            Yes, {SITENAME} is a responsive web-app and it works seamlessly on mobile devices. 
                            The front-end is powered by Bootstrap 5.2.3 the original design system used by twitter. 
                            In addition to the powerful tools behind the scenes, every page on {SITENAME} has been tested to work on devices of all sizes.
                        </span>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header context-main context-second-bg" id="generalHeading2">
                    <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                        Does {SITENAME} work on Mac/PC/Linux?
                    </button>
                </h2>
                <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="generalHeading2" data-bs-parent="#generalAccordion">
                    <div class="accordion-body context-main context-other-bg" id="general2">
                        <span class="text-lead text-primary">
                            Yes, in more ways than one. 
                            Since {SITENAME} is designed as a responsive web-app, its accessible from any browser connected to the internet. 
                            Behind the scenes, the app can be installed on any server hardware and has been tested with both nginx and Apache web-servers.
                        </span>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header context-main context-second-bg" id="generalHeading3">
                    <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                        How much does {SITENAME} cost?
                    </button>
                </h2>
                <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="generalHeading3" data-bs-parent="#generalAccordion">
                    <div class="accordion-body context-main context-other-bg" id="general3">
                        <span class="text-lead text-primary">
                            {SITENAME} is open source and available free of charge through <a href="{ROOT_URL}libraries/ttp/git" class="text-decoration-none">GitLab</a> and <a href="{ROOT_URL}libraries/ttp/packagist" class="text-decoration-none">Packagist</a>. 
                            The developer behind the project is <a href="https://joeykimsey.com/" class="text-decoration-none">Joey Kimsey</a> and he can be contacted through his website for development services.
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>