refactor: improve semantic by replacing decorative hr with borders (#597)

Replace decorative usage of Hr component with borders to improve
semantic.

- remove Hr component
- replace decorative hr elements with borders
- introduce app-layout utility class
- update layout and spacing
- update docs about border css custom property

src/layouts/Main.astro

@@ -21,11 +21,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
 ---
 
 <Breadcrumb />
-<main
-  data-backUrl={backUrl}
-  id="main-content"
-  class="mx-auto w-full max-w-app px-4 pb-4"
->
+<main data-backUrl={backUrl} id="main-content" class="app-layout pb-4">
   {
     "titleTransition" in props ? (
       <h1 class="text-2xl font-semibold sm:text-3xl">