Implement new css.Build.

assets/css/components/_cards.css

@@ -2,69 +2,67 @@
 
 A simple cards style. */
 
-@layer components {
-  .cards {
-    --grid-group-column-min: 200px;
-    --grid-group-gap: 1.5rem;
+.cards {
+  --grid-group-column-min: 200px;
+  --grid-group-gap: 1.5rem;
 
-    display: grid;
-    gap: var(--grid-group-gap);
+  display: grid;
+  gap: var(--grid-group-gap);
 
-    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
 
-    /* Add vertical rhythm margins. */
-    margin-block: var(--spacing-m);
-  }
+  /* Add vertical rhythm margins. */
+  margin-block: var(--spacing-m);
+}
 
-  .card {
-    padding: var(--spacing-xs);
-    border: 1px solid var(--color-border);
+.card {
+  padding: var(--spacing-xs);
+  border: 1px solid var(--color-border);
 
-    & > * {
-      &:first-child {
-        margin-block-start: 0;
-      }
-
-      &:last-child {
-        margin-block-end: 0;
-      }
+  & > * {
+    &:first-child {
+      margin-block-start: 0;
     }
-  }
 
-  .card--highlight {
-    border-color: var(--color-highlight);
+    &:last-child {
+      margin-block-end: 0;
+    }
   }
+}
 
-  .card--featured {
-    grid-row: span 2;
-    grid-column: span 2;
-  }
+.card--highlight {
+  border-color: var(--color-highlight);
+}
+
+.card--featured {
+  grid-row: span 2;
+  grid-column: span 2;
+}
 
-  .card--gutter {
-    padding-inline: var(--gutters);
-  }
+.card--gutter {
+  padding-inline: var(--gutters);
+}
 
-  .card--inverted {
-    background: var(--color-border);
-    color: var(--color-text-bg);
+.card--inverted {
+  background: var(--color-border);
+  color: var(--color-text-bg);
 
-    a {
-      &:link {
-        color: var(--color-link-inverted);
-      }
+  a {
+    &:link {
+      color: var(--color-link-inverted);
+    }
 
-      &:visited {
-        color: var(--color-link-visited-inverted);
-      }
+    &:visited {
+      color: var(--color-link-visited-inverted);
+    }
 
-      &:hover,
-      &:focus {
-        color: var(--color-link-hover-inverted);
-      }
+    &:hover,
+    &:focus {
+      color: var(--color-link-hover-inverted);
+    }
 
-      &:active {
-        color: var(--color-link-active-inverted);
-      }
+    &:active {
+      color: var(--color-link-active-inverted);
     }
   }
 }