Feature cards: icon column, one text edge

The icon floated, so a description's second line wrapped back under
it. With an icon the feature is a two-column grid: icon left, every
other child in the text column.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

style/main.css

@@ -430,10 +430,9 @@ main.not-found {
 }
 
 .feature-icon {
-  float: left;
   width: 1.3rem;
   height: 1.3rem;
-  margin: 0.1rem 0.6rem 0.4rem 0;
+  margin-top: 0.1rem;
   background-color: var(--feature-accent, currentColor);
   mask-repeat: no-repeat;
   mask-size: contain;
@@ -443,6 +442,26 @@ main.not-found {
   -webkit-mask-position: center;
 }
 
+/* With an icon the feature is two columns: the icon in the first,
+   everything else - name, description, fields, resources - in the
+   second, so every line of text shares one left edge instead of
+   wrapping back under the icon. */
+.feature:has(> .feature-icon) {
+  display: grid;
+  grid-template-columns: 1.3rem minmax(0, 1fr);
+  column-gap: 0.7rem;
+  align-items: start;
+}
+
+.feature:has(> .feature-icon) > .feature-icon {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.feature:has(> .feature-icon) > :not(.feature-icon) {
+  grid-column: 2;
+}
+
 .feature h3 {
   font-size: 1rem;
   margin-bottom: 0.15em;