Room under the homepage titles, which had none

"What people come in for" and "Visit us" were written with an mb-12 and rendered
with nothing: th:replace swaps the whole host element out for the fragment, so
the class attribute on that tag never reaches the page. Both titles sat flush on
the grid below them. Confirmed against the running site — mb-12 appears nowhere
in the served HTML.

The gap moves to the element below, which is where catering already keeps it
(mt-8 on its price grids) and which is the only place th:replace cannot eat it.
A little wider than the twelve that was intended, since the point is the breath:
14, and 18 from md.

The card captions get the same treatment — py-8 rather than py-6, and px-4 so a
longer name than "Cakes" doesn't run to the edges — and the two panel headings
in Visit us go mb-6 to mb-8.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/main/resources/templates/home.html

@@ -45,14 +45,18 @@
   <!--/* What people come in for */-->
   <section class="section bg-bakery-50">
     <div class="container">
-      <div class="mb-12" th:replace="~{fragments/opening :: section-head('What people come in for', '')}"></div>
+      <!--/* The gap under a section head belongs to the element BELOW it, the way catering's price grids
-      <div class="card-grid">
+             already do it. It cannot live on this tag: th:replace swaps the whole element out for the
+             fragment, so a class written here never reaches the page — which is what happened to the
+             mb-12 that used to sit here, leaving the title flush against the cards. */-->
+      <div th:replace="~{fragments/opening :: section-head('What people come in for', '')}"></div>
+      <div class="card-grid mt-14 md:mt-18">
         <div th:each="item : ${ {'Cinnamon Rolls', 'Sugar Cookies', 'Cakes'} }"
              class="panel overflow-hidden text-center">
           <!--/* The filenames carry the spaces in these names; SitePhotos encodes them. */-->
           <img th:src="${photos.of('gallery/' + item + '.webp')}" th:alt="${item}" width="600" height="400" loading="lazy"
                class="w-full h-56 object-cover">
-          <h3 class="panel-head border-b-0 border-t h4 md:text-2xl text-bakery-800 py-6" th:text="${item}">Cinnamon Rolls</h3>
+          <h3 class="panel-head border-b-0 border-t h4 md:text-2xl text-bakery-800 px-4 py-8" th:text="${item}">Cinnamon Rolls</h3>
         </div>
       </div>
     </div>
@@ -103,14 +107,15 @@
   <!--/* Visit us */-->
   <section id="visit" class="section bg-bakery-50 scroll-mt-24">
     <div class="container">
-      <div class="mb-12" th:replace="~{fragments/opening :: section-head('Visit us', '')}"></div>
+      <!--/* Same as above: the margin goes on the grid, not on a tag th:replace is about to discard. */-->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 measure-wide">
+      <div th:replace="~{fragments/opening :: section-head('Visit us', '')}"></div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 measure-wide mt-14 md:mt-18">
         <div class="panel p-6 md:p-8">
-          <h2 class="h3 text-bakery-900 mb-6">Our hours</h2>
+          <h2 class="h3 text-bakery-900 mb-8">Our hours</h2>
           <div th:replace="~{fragments/visit :: hours('text-bakery-800')}"></div>
         </div>
         <div class="panel p-6 md:p-8">
-          <h2 class="h3 text-bakery-900 mb-6">Find us</h2>
+          <h2 class="h3 text-bakery-900 mb-8">Find us</h2>
           <div class="text-bakery-800"
                th:replace="~{fragments/visit :: address('link-plain')}"></div>
         </div>