minor centering

Author: adictonator

style.css

@@ -1717,6 +1717,10 @@ html {
   justify-content: space-around;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }

template-parts/sections/section-cards.php

@@ -26,8 +26,8 @@
 		CSS & JavaScript Toolbox is <span class="text-brand-blue">ideal</span> for
 	</h2>
 	<div class="grid grid-cols-1 gap-5 lg:grid-cols-2 lg:grid-rows-2 lg:gap-x-10 lg:gap-y-14 lg:px-0 px-5 items-start mt-10 lg:mt-24">
-		<div class="grid md:justify-start justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
-			<div class="space-y-5 flex flex-col md:items-start items-center">
+		<div class="grid justify-items-center justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
+			<div class="space-y-5 flex flex-col items-center">
 				<svg xmlns="http://www.w3.org/2000/svg" class="size-16 p-2.5 bg-cyan-100 text-cyan-600 rounded" viewBox="0 0 24 24" fill="none">
 					<path d="M9.00002 13C8.34002 13.33 7.79002 13.82 7.38002 14.43C7.15002 14.78 7.15002 15.22 7.38002 15.57C7.79002 16.18 8.34002 16.67 9.00002 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
 					<path d="M15.21 13C15.87 13.33 16.42 13.82 16.83 14.43C17.06 14.78 17.06 15.22 16.83 15.57C16.42 16.18 15.87 16.67 15.21 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -36,12 +36,12 @@
 				</svg>
 				<h3 class="text-xl font-semibold text-gray-900 md:text-2xl">Making CSS front-end changes</h3>
 			</div>
-			<p class="text-neutral-500">
+			<p class="text-neutral-500 text-center">
 				No need to modify theme files. Just create a CSS code block.
 			</p>
 		</div>
-		<div class="grid md:justify-start justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
-			<div class="space-y-5 flex flex-col md:items-start items-center">
+		<div class="grid justify-items-center justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
+			<div class="space-y-5 flex flex-col items-center">
 				<svg xmlns="http://www.w3.org/2000/svg" class="size-16 p-2.5 rounded bg-red-100 text-red-600" viewBox="0 0 24 24" fill="none">
 					<path d="M22 5.14999V7.85001C22 10.1 21.1 11 18.85 11H16.15C13.9 11 13 10.1 13 7.85001V5.14999C13 2.89999 13.9 2 16.15 2H18.85C21.1 2 22 2.89999 22 5.14999Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
 					<path d="M11 16.15V18.85C11 21.1 10.1 22 7.85 22H5.15C2.9 22 2 21.1 2 18.85V16.15C2 13.9 2.9 13 5.15 13H7.85C10.1 13 11 13.9 11 16.15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -50,12 +50,12 @@
 
 				<h3 class="text-xl font-semibold text-gray-900 md:text-2xl">Adding site functionality</h3>
 			</div>
-			<p class="text-neutral-500">
+			<p class="text-neutral-500 text-center">
 				Stop adding plugins for simple tasks. They can slow down your site. Create a JavaScript or PHP code block instead.
 			</p>
 		</div>
-		<div class="grid md:justify-start justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
-			<div class="space-y-5 flex flex-col md:items-start items-center">
+		<div class="grid justify-items-center justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
+			<div class="space-y-5 flex flex-col items-center">
 				<svg xmlns="http://www.w3.org/2000/svg" class="size-16 p-2.5 rounded bg-sky-100 text-sky-600" viewBox="0 0 24 24" fill="none">
 					<path d="M12.1401 15.0701V13.11C12.1401 10.59 14.1801 8.54004 16.7101 8.54004H18.6701" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
 					<path d="M5.62012 8.55005H7.58014C10.1001 8.55005 12.1501 10.59 12.1501 13.12V13.7701V17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@@ -65,19 +65,19 @@
 				</svg>
 				<h3 class="text-xl font-semibold text-gray-900 md:text-2xl">Third-party scripts</h3>
 			</div>
-			<p class="text-neutral-500">
+			<p class="text-neutral-500 text-center">
 				Code blocks are perfect for adding scripts such as Google Analytics and chat widgets to your website.
 			</p>
 		</div>
-		<div class="grid md:justify-start justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
-			<div class="space-y-5 flex flex-col md:items-start items-center">
+		<div class="grid justify-items-center justify-center md:text-start text-center items-center lg:space-y-5 space-y-2.5">
+			<div class="space-y-5 flex flex-col items-center">
 				<svg xmlns="http://www.w3.org/2000/svg" class="size-16 p-2.5 bg-green-100 rounded text-green-600" viewBox="0 0 24 24" fill="none">
 					<path d="M2 2V19C2 20.66 3.34 22 5 22H22" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
 					<path d="M5 17L9.59 11.64C10.35 10.76 11.7 10.7 12.52 11.53L13.47 12.48C14.29 13.3 15.64 13.25 16.4 12.37L21 7" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
 				</svg>
 				<h3 class="text-xl font-semibold text-gray-900 md:text-2xl">Fast site development</h3>
 			</div>
-			<p class="text-neutral-500">
+			<p class="text-neutral-500 text-center">
 				FTP? No thanks! Create code blocks for all your code snippets and scripts and view them all in one dashboard.
 			</p>
 		</div>