            <div class="page-header">
                <div>
                    <h1>Grid system</h1>
                    <p class="subtitle">Bootstrap 5&rsquo;s 12-column responsive grid.</p>
                </div>
            </div>

            <h5 class="heading-title">Fixed grid</h5>
            <div class="row">
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
              <div class="col">
                <section class="card">
                  <div class="card-body text-secondary">.col</div>
                </section>
              </div>
            </div>

            <h5 class="heading-title">Desktop Grid</h5>
            <div class="row">
              <div class="col col-lg-12">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-12</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-6">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-6</div>
                </section>
              </div>
              <div class="col-lg-6">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-6</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-4">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-4</div>
                </section>
              </div>
              <div class="col-lg-4">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-4</div>
                </section>
              </div>
              <div class="col-lg-4">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-4</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-3">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-3</div>
                </section>
              </div>
              <div class="col-lg-3">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-3</div>
                </section>
              </div>
              <div class="col-lg-3">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-3</div>
                </section>
              </div>
              <div class="col-lg-3">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-3</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-2">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-2</div>
                </section>
              </div>
              <div class="col-lg-2">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-2</div>
                </section>
              </div>
              <div class="col-lg-2">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-2</div>
                </section>
              </div>
              <div class="col-lg-2">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-2</div>
                </section>
              </div>
              <div class="col-lg-2">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-2</div>
                </section>
              </div>
              <div class="col-lg-2">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-2</div>
                </section>
              </div>
            </div>

            <h4 class="heading-title">Mobile, Tablet, and Desktop</h4>

            <div class="row">
              <div class="col-2">
                <section class="card">
                  <div class="card-body text-secondary">col-2</div>
                </section>
              </div>
              <div class="col-2">
                <section class="card">
                  <div class="card-body text-secondary">col-2</div>
                </section>
              </div>
              <div class="col-lg-8">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-8</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-3">
                <section class="card">
                  <div class="card-body text-secondary">col-sm-3</div>
                </section>
              </div>
              <div class="col-sm-3">
                <section class="card">
                  <div class="card-body text-secondary">col-sm-3</div>
                </section>
              </div>
              <div class="col-lg-6">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-6</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-md-4">
                <section class="card">
                  <div class="card-body text-secondary">col-md-4</div>
                </section>
              </div>
              <div class="col-md-4">
                <section class="card">
                  <div class="card-body text-secondary">col-md-4</div>
                </section>
              </div>
              <div class="col-lg-4">
                <section class="card">
                  <div class="card-body text-secondary">col-lg-4</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-6">
                <section class="card">
                  <div class="card-body text-secondary">col-sm-6</div>
                </section>
              </div>
              <div class="col-sm-6">
                <section class="card">
                  <div class="card-body text-secondary">col-sm-6</div>
                </section>
              </div>
            </div>

            <h5 class="heading-title">Offset Grid</h5>

            <div class="row">
              <div class="col-md-6 offset-md-6 col-sm-6 ms-auto">
                <section class="card">
                  <div class="card-body text-secondary">col-md-6 offset-md-6 col-sm-6 </div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6 offset-md-3 me-auto ms-auto">
                <section class="card">
                  <div class="card-body text-secondary">.col-md-6 .offset-md-3</div>
                </section>
              </div>
            </div>

            <div class="row">
              <div class="col-md-4">
                <section class="card">
                  <div class="card-body text-secondary"> .col-md-4 </div>
                </section>
              </div>
              <div class="col-md-4 ms-auto">
                <section class="card">
                  <div class="card-body text-secondary">.col-md-4 .ms-auto</div>
                </section>
              </div>
            </div>
