Improve card style

assets/style.css

@@ -1153,6 +1153,18 @@ html:not(.dark) .light\:hidden {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:gap-2 {
+    gap: 0.5rem;
+  }
+
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -1235,6 +1247,14 @@ html:not(.dark) .light\:hidden {
     flex-direction: row;
   }
 
+  .lg\:items-center {
+    align-items: center;
+  }
+
+  .lg\:gap-2 {
+    gap: 0.5rem;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }

layouts/partials/services.html

@@ -3,13 +3,13 @@
     <li>
       <article>
         {{ .Params.iconSvg | safeHTML }}
-        <div class="flex items-center gap-2 mb-2">
+        <div class="flex flex-col lg:flex-row lg:items-center lg:gap-2 mb-2">
           {{ if isset .Params "icon" }}
             <i class="ri-{{ .Params.icon }} block text-3xl"></i>
           {{ end }}
-          <h4 class="inline mr-1"><a href="{{ .Params.href }}" class="font-bold link">{{ .Title }}</a></h4>
+          <h4 class="mr-1"><a href="{{ .Params.href }}" class="font-bold link">{{ .Title }}</a></h4>
         </div>
-        <div class="inline prose">
+        <div class="prose">
           {{ .Params.description | safeHTML }}
         </div>
         {{/*  <p class="mt-2">