<article>

  <div class="bg-white">

    <div class="px-4">

      <p class="font-medium">
        There are a few choices for accommodation, depending on what you want and what is available.
      </p>


      <ul class="space-y-4 py-2">

        <li>

          <div class="lg:grid grid-cols-5 gap-4">

            <div>
              <h3 class="font-bold">Residence</h3>
              <img class="mb-2" src="<?= get_template_directory_uri() ?>/assets/images/bgs/residence.png" alt="Residence">
            </div>

            <p class="col-span-3">This is on-campus accommodation and ideal for schools away from home. It is a single or shared room, with access to a common bathroom, laundry, and common room. Students in residence often get a meal plan at the cafeteria. You will meet with many other students, and many lifelong friendships are made!
            </p>

          </div>

          <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>

        </li>

        <li>
          <div class="lg:grid grid-cols-5 gap-4">
            <div>
              <h3 class="font-bold">Rent a room or apartment</h3>
              <img class="mb-2" src="<?= get_template_directory_uri() ?>/assets/images/bgs/rent-apartment.png" alt="Rent Room/Apartment">
            </div>
            <p class="col-span-3">This is off-campus housing. Depending on what you want and what you can afford, you might get a room in a house or apartment. Remember to consider the costs that are not included in the rent.</p>
          </div>
          <!-- Horizontal Rule -->
          <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>
        </li>

        <li>
          <div class="lg:grid grid-cols-5 gap-4">
            <div>
              <h3 class="font-bold">Room with friends or family</h3>
              <img class="mb-2" src="<?= get_template_directory_uri() ?>/assets/images/bgs/room-with-family-or-friends.png" alt="Room with friends or family">
            </div>
            <p class="col-span-3">If you have friends or family living in the city, you may be able to live with them. Again, ask questions about sharing their home.</p>
          </div>
        </li>

      </ul>

      <h2 class="text-l p-4 text-red-500 font-bold">Whatever you decide, make your arrangements as early as you can.</h2>

      <div class="py-8 space-y-4 lg:grid grid-cols-2 mx-auto items-center">
        <img class="lg:w-1/2 mx-auto" src="<?= get_template_directory_uri() ?>/assets/images/bgs/make-plans-early.png" alt="Fit School Into Life">
      </div>


    </div>

</article>