Improve storefront blog index card layout and sizing.

Use blog-specific grid breakpoints so mobile stays single-column while wider viewports grow naturally like the product list.

backend/src/modules/storefrontCore/public/css/storefront.css

@@ -49,6 +49,8 @@
     --sf-split-sidebar: minmax(220px, 320px);
     --sf-product-card-min: 11rem;
     --sf-product-card-max: 22rem;
+    --sf-blog-card-min: 17rem;
+    --sf-blog-card-max: 28rem;
     --sf-sticky-header-scroll-padding: 9rem;
 }
 
@@ -1602,18 +1604,18 @@ a:hover {
 .sf-blog-grid {
     display: grid;
     gap: var(--sf-space-3);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr);
 }
 
 @media (min-width: 36rem) {
     .sf-blog-grid {
-        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sf-product-card-min)), 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sf-blog-card-min)), 1fr));
     }
 }
 
 .sf-blog-card {
     width: 100%;
-    max-width: var(--sf-product-card-max);
+    max-width: var(--sf-blog-card-max);
     min-width: 0;
     justify-self: start;
 }
@@ -1626,6 +1628,10 @@ a:hover {
     text-decoration: none;
 }
 
+.sf-blog-card__link:hover .sf-blog-card__title {
+    color: var(--sf-link-hover);
+}
+
 .sf-blog-card__media {
     aspect-ratio: 16 / 9;
     background: var(--sf-surface-muted);
@@ -1640,6 +1646,8 @@ a:hover {
 }
 
 .sf-blog-card__title {
+    font-size: 0.9375rem;
+    line-height: 1.4;
     font-weight: 600;
 }