diff --git a/builder/ilw-card.json b/builder/ilw-card.json
index 83c3d81..af636bd 100644
--- a/builder/ilw-card.json
+++ b/builder/ilw-card.json
@@ -7,5 +7,5 @@
     "description": "A card component that can be used as a container for grouping information.",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha1"
+    "development-version": "1.0.0-alpha2"
 }
diff --git a/builder/versions/ilw-card.1.0.0-alpha1.json b/builder/versions/ilw-card.1.0.0-alpha2.json
similarity index 99%
rename from builder/versions/ilw-card.1.0.0-alpha1.json
rename to builder/versions/ilw-card.1.0.0-alpha2.json
index 3b691a0..b235974 100644
--- a/builder/versions/ilw-card.1.0.0-alpha1.json
+++ b/builder/versions/ilw-card.1.0.0-alpha2.json
@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-card",
     "description": "A card component that can be used as a container for grouping information.",
-    "version": "1.0.0-alpha1",
+    "version": "1.0.0-alpha2",
     "date": "08/02/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha1/ilw-card.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha1/ilw-card.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha2/ilw-card.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha2/ilw-card.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 400px; padding: 15px;",
diff --git a/package.json b/package.json
index 6132234..74cee2c 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "description": "Illinois Toolkit: A card component that can be used as a container for grouping information, reminiscent of a physical note or playing card.",
     "repository": "github:web-illinois/ilw-card",
     "private": false,
-    "version": "1.0.0-alpha1",
+    "version": "1.0.0-alpha2",
     "type": "module",
     "files": [
       "src/**",
diff --git a/src/ilw-card.css b/src/ilw-card.css
index 720e153..de39d58 100644
--- a/src/ilw-card.css
+++ b/src/ilw-card.css
@@ -1,247 +1,4 @@
-@layer base {
-    :root {
-        --ilw-card--margin-top: 1rem; /*var: Margin above cards*/
-        --ilw-card--margin-bottom: 1rem; /*var: Margin below cards*/
-        --ilw-card--aspect-ratio: 16/10;
-        --ilw-card--content-padding-top: 2.5rem; /*var: Top padding around main content in the card*/
-        --ilw-card--content-padding-right: 2rem; /*var: Right padding around main content in the card*/
-        --ilw-card--content-padding-bottom: 2rem; /*var: Bottom padding around main content in the card*/
-        --ilw-card--content-padding-left: 2rem; /*var: Left padding around main content in the card*/
-        --ilw-card--font-size: 1.2rem; /*var: Card text font size*/
-        --ilw-card--heading--font-size: 1.45em; /*var: Font size for a card's heading*/
-        --ilw-card--icon-width: 120px; /*var: Limit for an icon's width*/
-        --ilw-card--icon-height: 80px; /*var: Limit for an icon's height*/
-        --ilw-card--orange-1: #fd890e;
-
-        --ilw-card--orange-gradient: linear-gradient(
-            135.14deg,
-            var(--il-harvest) 0%,
-            var(--ilw-card--orange-1) 30.44%,
-            var(--il-orange) 100.75%
-        );
-        --ilw-card--blue-gradient: linear-gradient(
-            160deg,
-            var(--il-industrial) 20%,
-            var(--il-blue) 100%
-        );
-
-        --ilw-card--border-color: var(--il-blue); /*var: Color of the border around the card*/
-        --ilw-card--background: var(--ilw-background--color); /*var: CSS background for the card*/
-        --ilw-card--heading-color: var(--il-orange); /*var: Color of the heading in the card*/
-        --ilw-card--icon-color: var(--ilw-text--color); /*var: Color of an icon in the card*/
-        --ilw-card--text-color: var(--ilw-text--color); /*var: Color of text in the card*/
-
-        /* Links need to be colored differently depending on the theme */
-        --ilw-card--link: var(--ilw-link--color); /*var: Color for links inside the card */
-        --ilw-card--link-focus: var(--ilw-link--focused-color);  /*var: Focus and hover color for links inside the card*/
-        --ilw-card--link-visited: var(--ilw-link--visited-color);  /*var: Visited link color for inside the card*/
-
-        --ilw-card--clickable--heading-color: var(--ilw-card--heading-color);  /*var: Color of a clickable card heading*/
-        --ilw-card--clickable--border: var(--il-orange);
-
-        /* Colors for a clickable card when hovered */
-        --ilw-card--hover--background: var(--il-blue);  /*var: Background for the hover state of a clickable card*/
-        --ilw-card--hover--heading-color: #fff;  /*var: Color of the heading for the hover state of a clickable card*/
-        --ilw-card--hover--text-color: #fff; /*var: Color of text for the hover state of a clickable card*/
-        --ilw-card--hover--clickable-border: var(--il-industrial-lighter-1); /*var: Color of the bottom wider border for the hover state of a clickable card*/
-        --ilw-card--hover--link: var(--ilw-card--hover--text-color); /*var: Link color for links inside the hover state of a clickable card*/
-        --ilw-card--hover--link-focus: var(--il-orange); /*var: Focus and hover color for links inside the hover state of a clickable card*/
-    }
-
-    ilw-card {
-        /* Buttons also need color changes with themes, but overriding classes on
-           the buttons themselves should take precedence over these. */
-        --ilw-button--background-color: #fff;
-        --ilw-button--foreground-color: var(--il-blue);
-        --ilw-button--border-color: var(--il-blue);
-        --ilw-button--focused-background-color: var(--il-blue);
-        --ilw-button--focused-foreground-color: #fff;
-        --ilw-button--focused-border-color: var(--il-blue);
-    }
-
-    ilw-card[clickable]:hover {
-        --ilw-button--background-color: #fff;
-        --ilw-button--foreground-color: var(--il-blue);
-        --ilw-button--border-color: var(--il-blue);
-        --ilw-button--focused-background-color: var(--il-blue);
-        --ilw-button--focused-foreground-color: #fff;
-        --ilw-button--focused-border-color: #fff;
-    }
-
-    ilw-card[theme="gray"] {
-        --ilw-card--border-color: var(--il-storm);
-        --ilw-card--background: var(--il-storm-lighter-4);
-        --ilw-card--heading-color: var(--il-blue);
-        --ilw-card--icon-color: var(--il-storm-darker-1);
-        --ilw-card--text-color: var(--il-storm-darker-1);
-
-        --ilw-card--clickable--heading-color: var(--il-altgeld);
-        --ilw-card--clickable--border: var(--il-altgeld);
-        --ilw-card--link: var(--ilw-link--color);
-    }
-
-    ilw-card[theme="blue"] {
-        --ilw-card--border-color: var(--il-storm);
-        --ilw-card--background: var(--il-blue);
-        --ilw-card--heading-color: var(--il-orange);
-        --ilw-card--icon-color: #fff;
-        --ilw-card--text-color: #fff;
-        --ilw-card--link: #fff;
-        --ilw-card--link-focus: var(--il-orange);
-        --ilw-card--link-visited: #fff;
-
-        --ilw-card--clickable--heading-color: var(--il-orange);
-        --ilw-card--clickable--border: var(--il-orange);
-
-        --ilw-card--hover--background: #fff;
-        --ilw-card--hover--heading-color: var(--il-orange);
-        --ilw-card--hover--text-color: var(--ilw-text--color);
-        --ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
-        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
-        --ilw-card--hover--link-focus: var(--il-altgeld);
-
-        --ilw-button--background-color: transparent;
-        --ilw-button--foreground-color: #fff;
-        --ilw-button--border-color: #fff;
-        --ilw-button--focused-background-color: #fff;
-        --ilw-button--focused-foreground-color: var(--il-blue);
-        --ilw-button--focused-border-color: var(--il-blue);
-
-        &[clickable]:hover {
-            --ilw-button--background-color: #fff;
-            --ilw-button--border-color: var(--il-blue);
-            --ilw-button--foreground-color: var(--il-blue);
-            --ilw-button--focused-background-color: var(--il-blue);
-            --ilw-button--focused-foreground-color: #fff;
-            --ilw-button--focused-border-color: var(--il-blue);
-        }
-    }
-
-    ilw-card[theme="orange"] {
-        --ilw-card--border-color: var(--il-storm);
-        --ilw-card--background: var(--il-orange);
-        --ilw-card--heading-color: #fff;
-        --ilw-card--icon-color: var(--il-blue);
-        --ilw-card--text-color: var(--il-blue);
-
-        --ilw-card--clickable--heading-color: #fff;
-        --ilw-card--clickable--border: var(--il-blue);
-        --ilw-card--link: var(--il-blue);
-        --ilw-card--link-focus: var(--il-blue-lighter-1);
-        --ilw-card--link-visited: var(--il-blue);
-
-        --ilw-card--hover--background: #fff;
-        --ilw-card--hover--heading-color: var(--il-orange);
-        --ilw-card--hover--text-color: var(--ilw-text--color);
-        --ilw-card--hover--clickable-border: var(--il-orange);
-        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
-        --ilw-card--hover--link-focus: var(--il-altgeld);
-
-        --ilw-button--background-color: var(--il-orange);
-        --ilw-button--foreground-color: #fff;
-        --ilw-button--border-color: #fff;
-        --ilw-button--focused-background-color: #fff;
-        --ilw-button--focused-foreground-color: var(--il-orange);
-        --ilw-button--focused-border-color: var(--il-orange);
-
-        &[clickable]:hover {
-            --ilw-button--border-color: var(--il-orange);
-            --ilw-button--background-color: #fff;
-            --ilw-button--foreground-color: var(--il-orange);
-            --ilw-button--focused-background-color: var(--il-orange);
-            --ilw-button--focused-foreground-color: #fff;
-            --ilw-button--focused-border-color: var(--il-orange);
-        }
-    }
-
-    ilw-card[theme="blue-gradient"] {
-        --ilw-card--border-color: var(--il-storm);
-        --ilw-card--background: var(--ilw-card--blue-gradient);
-
-        --ilw-card--heading-color: #fff;
-        --ilw-card--icon-color: #fff;
-        --ilw-card--text-color: #fff;
-        --ilw-card--link: #fff;
-        --ilw-card--link-focus: var(--il-storm-lighter-3);
-        --ilw-card--link-visited: #fff;
-
-        --ilw-card--clickable--heading-color: #fff;
-        --ilw-card--clickable--border: var(--il-industrial-lighter-2);
-
-        --ilw-card--hover--background: #fff;
-        --ilw-card--hover--heading-color: var(--il-orange);
-        --ilw-card--hover--text-color: var(--ilw-text--color);
-        --ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
-        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
-        --ilw-card--hover--link-focus: var(--il-altgeld);
-
-
-        --ilw-button--background-color: transparent;
-        --ilw-button--foreground-color: #fff;
-        --ilw-button--border-color: #fff;
-        --ilw-button--focused-background-color: #fff;
-        --ilw-button--focused-foreground-color: var(--il-blue);
-        --ilw-button--focused-border-color: var(--il-blue);
-
-        &[clickable]:hover {
-            --ilw-button--background-color: #fff;
-            --ilw-button--border-color: var(--il-blue);
-            --ilw-button--foreground-color: var(--il-blue);
-            --ilw-button--focused-background-color: var(--il-blue);
-            --ilw-button--focused-foreground-color: #fff;
-            --ilw-button--focused-border-color: var(--il-blue);
-        }
-    }
-
-    ilw-card[theme="orange-gradient"] {
-        --ilw-card--border-color: var(--il-storm);
-        --ilw-card--background: var(--ilw-card--orange-gradient);
-        --ilw-card--heading-color: var(--il-blue);
-        --ilw-card--icon-color: var(--il-blue);
-        --ilw-card--text-color: var(--il-blue);
-        --ilw-card--link: var(--il-blue);
-        --ilw-card--link-focus: var(--il-blue-lighter-1);
-        --ilw-card--link-visited: var(--il-blue);
-
-        --ilw-card--clickable--heading-color: var(--il-blue);
-        --ilw-card--clickable--border: var(--il-industrial);
-
-        --ilw-card--hover--background: #fff;
-        --ilw-card--hover--heading-color: var(--il-orange);
-        --ilw-card--hover--text-color: var(--ilw-text--color);
-        --ilw-card--hover--clickable-border: var(--il-orange);
-        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
-        --ilw-card--hover--link-focus: var(--il-altgeld);
-
-        --ilw-button--background-color: transparent;
-        --ilw-button--foreground-color: var(--il-blue);
-        --ilw-button--border-color: var(--il-blue);
-        --ilw-button--focused-background-color: #fff;
-        --ilw-button--focused-foreground-color: var(--il-orange);
-        --ilw-button--focused-border-color: var(--il-orange);
-
-        &[clickable]:hover {
-            --ilw-button--background-color: transparent;
-            --ilw-button--border-color: var(--il-orange);
-            --ilw-button--foreground-color: var(--il-orange);
-            --ilw-button--focused-background-color: var(--il-orange);
-            --ilw-button--focused-foreground-color: #fff;
-            --ilw-button--focused-border-color: var(--il-orange);
-        }
-    }
-}
-
 ilw-card {
-    border: 1px solid var(--ilw-card--border-color);
-    background: var(--ilw-card--background);
-    margin-top: var(--ilw-card--margin-top);
-    margin-bottom: var(--ilw-card--margin-bottom);
-    color: var(--ilw-card--text-color);
-
-    &[align="center"] {
-        text-align: center;
-    }
-
     a {
         color: var(--ilw-card--link);
         &:focus {
@@ -366,10 +123,6 @@ ilw-card[clickable] {
     }
 }
 
-ilw-card[aspect-ratio] > [slot=image] {
-
-}
-
 /* Make il icons color currentColor in cards */
 ilw-card path.cls-1 {
     fill: currentColor;
diff --git a/src/ilw-card.js b/src/ilw-card.js
index 304b5ad..5b709c4 100644
--- a/src/ilw-card.js
+++ b/src/ilw-card.js
@@ -1,5 +1,5 @@
-import { LitElement, html } from "lit";
-import styles from "./ilw-card.styles";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./ilw-card.styles.css?inline";
 import "./ilw-card.css";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -16,7 +16,7 @@ class Card extends LitElement {
     }
 
     static get styles() {
-        return styles;
+        return unsafeCSS(styles);
     }
 
     constructor() {
diff --git a/src/ilw-card.styles.css b/src/ilw-card.styles.css
new file mode 100644
index 0000000..b444262
--- /dev/null
+++ b/src/ilw-card.styles.css
@@ -0,0 +1,305 @@
+/* Styleable variables are in the base layer so they can be overridden easily */
+@layer base {
+    :host {
+        --ilw-card--margin-top: 1rem; /*var: Margin above cards*/
+        --ilw-card--margin-bottom: 1rem; /*var: Margin below cards*/
+        --ilw-card--aspect-ratio: 16/10;
+        --ilw-card--content-padding-top: 2.5rem; /*var: Top padding around main content in the card*/
+        --ilw-card--content-padding-right: 2rem; /*var: Right padding around main content in the card*/
+        --ilw-card--content-padding-bottom: 2rem; /*var: Bottom padding around main content in the card*/
+        --ilw-card--content-padding-left: 2rem; /*var: Left padding around main content in the card*/
+        --ilw-card--font-size: 1.2rem; /*var: Card text font size*/
+        --ilw-card--heading--font-size: 1.45em; /*var: Font size for a card's heading*/
+        --ilw-card--icon-width: 120px; /*var: Limit for an icon's width*/
+        --ilw-card--icon-height: 80px; /*var: Limit for an icon's height*/
+        --ilw-card--orange-1: #fd890e;
+
+        --ilw-card--orange-gradient: linear-gradient(
+                135.14deg,
+                var(--il-harvest) 0%,
+                var(--ilw-card--orange-1) 30.44%,
+                var(--il-orange) 100.75%
+        );
+        --ilw-card--blue-gradient: linear-gradient(
+                160deg,
+                var(--il-industrial) 20%,
+                var(--il-blue) 100%
+        );
+
+        --ilw-card--border-color: var(--il-blue); /*var: Color of the border around the card*/
+        --ilw-card--background: var(--ilw-background--color); /*var: CSS background for the card*/
+        --ilw-card--heading-color: var(--il-orange); /*var: Color of the heading in the card*/
+        --ilw-card--icon-color: var(--ilw-text--color); /*var: Color of an icon in the card*/
+        --ilw-card--text-color: var(--ilw-text--color); /*var: Color of text in the card*/
+
+        /* Links need to be colored differently depending on the theme */
+        --ilw-card--link: var(--ilw-link--color); /*var: Color for links inside the card */
+        --ilw-card--link-focus: var(--ilw-link--focused-color); /*var: Focus and hover color for links inside the card*/
+        --ilw-card--link-visited: var(--ilw-link--visited-color); /*var: Visited link color for inside the card*/
+
+        --ilw-card--clickable--heading-color: var(--ilw-card--heading-color); /*var: Color of a clickable card heading*/
+        --ilw-card--clickable--border: var(--il-orange);
+
+        /* Colors for a clickable card when hovered */
+        --ilw-card--hover--background: var(--il-blue); /*var: Background for the hover state of a clickable card*/
+        --ilw-card--hover--heading-color: #fff; /*var: Color of the heading for the hover state of a clickable card*/
+        --ilw-card--hover--text-color: #fff; /*var: Color of text for the hover state of a clickable card*/
+        --ilw-card--hover--clickable-border: var(--il-industrial-lighter-1); /*var: Color of the bottom wider border for the hover state of a clickable card*/
+        --ilw-card--hover--link: var(--ilw-card--hover--text-color); /*var: Link color for links inside the hover state of a clickable card*/
+        --ilw-card--hover--link-focus: var(--il-orange); /*var: Focus and hover color for links inside the hover state of a clickable card*/
+
+
+        /* Buttons also need color changes with themes, but overriding classes on
+           the buttons themselves should take precedence over these. */
+        --ilw-button--background-color: #fff;
+        --ilw-button--foreground-color: var(--il-blue);
+        --ilw-button--border-color: var(--il-blue);
+        --ilw-button--focused-background-color: var(--il-blue);
+        --ilw-button--focused-foreground-color: #fff;
+        --ilw-button--focused-border-color: var(--il-blue);
+    }
+
+    :host([clickable]:hover) {
+        --ilw-button--background-color: #fff;
+        --ilw-button--foreground-color: var(--il-blue);
+        --ilw-button--border-color: var(--il-blue);
+        --ilw-button--focused-background-color: var(--il-blue);
+        --ilw-button--focused-foreground-color: #fff;
+        --ilw-button--focused-border-color: #fff;
+    }
+
+    :host([theme="gray"]) {
+        --ilw-card--border-color: var(--il-storm);
+        --ilw-card--background: var(--il-storm-lighter-4);
+        --ilw-card--heading-color: var(--il-blue);
+        --ilw-card--icon-color: var(--il-storm-darker-1);
+        --ilw-card--text-color: var(--il-storm-darker-1);
+
+        --ilw-card--clickable--heading-color: var(--il-altgeld);
+        --ilw-card--clickable--border: var(--il-altgeld);
+        --ilw-card--link: var(--ilw-link--color);
+    }
+
+    :host([theme="blue"]) {
+        --ilw-card--border-color: var(--il-storm);
+        --ilw-card--background: var(--il-blue);
+        --ilw-card--heading-color: var(--il-orange);
+        --ilw-card--icon-color: #fff;
+        --ilw-card--text-color: #fff;
+        --ilw-card--link: #fff;
+        --ilw-card--link-focus: var(--il-orange);
+        --ilw-card--link-visited: #fff;
+
+        --ilw-card--clickable--heading-color: var(--il-orange);
+        --ilw-card--clickable--border: var(--il-orange);
+
+        --ilw-card--hover--background: #fff;
+        --ilw-card--hover--heading-color: var(--il-orange);
+        --ilw-card--hover--text-color: var(--ilw-text--color);
+        --ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
+        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
+        --ilw-card--hover--link-focus: var(--il-altgeld);
+
+        --ilw-button--background-color: transparent;
+        --ilw-button--foreground-color: #fff;
+        --ilw-button--border-color: #fff;
+        --ilw-button--focused-background-color: #fff;
+        --ilw-button--focused-foreground-color: var(--il-blue);
+        --ilw-button--focused-border-color: var(--il-blue);
+    }
+
+    :host([clickable]:hover) {
+        --ilw-button--background-color: #fff;
+        --ilw-button--border-color: var(--il-blue);
+        --ilw-button--foreground-color: var(--il-blue);
+        --ilw-button--focused-background-color: var(--il-blue);
+        --ilw-button--focused-foreground-color: #fff;
+        --ilw-button--focused-border-color: var(--il-blue);
+    }
+
+    :host([theme="orange"]) {
+        --ilw-card--border-color: var(--il-storm);
+        --ilw-card--background: var(--il-orange);
+        --ilw-card--heading-color: #fff;
+        --ilw-card--icon-color: var(--il-blue);
+        --ilw-card--text-color: var(--il-blue);
+
+        --ilw-card--clickable--heading-color: #fff;
+        --ilw-card--clickable--border: var(--il-blue);
+        --ilw-card--link: var(--il-blue);
+        --ilw-card--link-focus: var(--il-blue-lighter-1);
+        --ilw-card--link-visited: var(--il-blue);
+
+        --ilw-card--hover--background: #fff;
+        --ilw-card--hover--heading-color: var(--il-orange);
+        --ilw-card--hover--text-color: var(--ilw-text--color);
+        --ilw-card--hover--clickable-border: var(--il-orange);
+        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
+        --ilw-card--hover--link-focus: var(--il-altgeld);
+
+        --ilw-button--background-color: var(--il-orange);
+        --ilw-button--foreground-color: #fff;
+        --ilw-button--border-color: #fff;
+        --ilw-button--focused-background-color: #fff;
+        --ilw-button--focused-foreground-color: var(--il-orange);
+        --ilw-button--focused-border-color: var(--il-orange);
+    }
+
+    :host([theme="orange"][clickable]:hover) {
+        --ilw-button--border-color: var(--il-orange);
+        --ilw-button--background-color: #fff;
+        --ilw-button--foreground-color: var(--il-orange);
+        --ilw-button--focused-background-color: var(--il-orange);
+        --ilw-button--focused-foreground-color: #fff;
+        --ilw-button--focused-border-color: var(--il-orange);
+    }
+
+    :host([theme="blue-gradient"]) {
+        --ilw-card--border-color: var(--il-storm);
+        --ilw-card--background: var(--ilw-card--blue-gradient);
+
+        --ilw-card--heading-color: #fff;
+        --ilw-card--icon-color: #fff;
+        --ilw-card--text-color: #fff;
+        --ilw-card--link: #fff;
+        --ilw-card--link-focus: var(--il-storm-lighter-3);
+        --ilw-card--link-visited: #fff;
+
+        --ilw-card--clickable--heading-color: #fff;
+        --ilw-card--clickable--border: var(--il-industrial-lighter-2);
+
+        --ilw-card--hover--background: #fff;
+        --ilw-card--hover--heading-color: var(--il-orange);
+        --ilw-card--hover--text-color: var(--ilw-text--color);
+        --ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
+        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
+        --ilw-card--hover--link-focus: var(--il-altgeld);
+
+
+        --ilw-button--background-color: transparent;
+        --ilw-button--foreground-color: #fff;
+        --ilw-button--border-color: #fff;
+        --ilw-button--focused-background-color: #fff;
+        --ilw-button--focused-foreground-color: var(--il-blue);
+        --ilw-button--focused-border-color: var(--il-blue);
+    }
+
+    :host([theme="blue-gradient"][clickable]:hover) {
+        --ilw-button--background-color: #fff;
+        --ilw-button--border-color: var(--il-blue);
+        --ilw-button--foreground-color: var(--il-blue);
+        --ilw-button--focused-background-color: var(--il-blue);
+        --ilw-button--focused-foreground-color: #fff;
+        --ilw-button--focused-border-color: var(--il-blue);
+    }
+
+    :host([theme="orange-gradient"] ) {
+        --ilw-card--border-color: var(--il-storm);
+        --ilw-card--background: var(--ilw-card--orange-gradient);
+        --ilw-card--heading-color: var(--il-blue);
+        --ilw-card--icon-color: var(--il-blue);
+        --ilw-card--text-color: var(--il-blue);
+        --ilw-card--link: var(--il-blue);
+        --ilw-card--link-focus: var(--il-blue-lighter-1);
+        --ilw-card--link-visited: var(--il-blue);
+
+        --ilw-card--clickable--heading-color: var(--il-blue);
+        --ilw-card--clickable--border: var(--il-industrial);
+
+        --ilw-card--hover--background: #fff;
+        --ilw-card--hover--heading-color: var(--il-orange);
+        --ilw-card--hover--text-color: var(--ilw-text--color);
+        --ilw-card--hover--clickable-border: var(--il-orange);
+        --ilw-card--hover--link: var(--ilw-card--hover--text-color);
+        --ilw-card--hover--link-focus: var(--il-altgeld);
+
+        --ilw-button--background-color: transparent;
+        --ilw-button--foreground-color: var(--il-blue);
+        --ilw-button--border-color: var(--il-blue);
+        --ilw-button--focused-background-color: #fff;
+        --ilw-button--focused-foreground-color: var(--il-orange);
+        --ilw-button--focused-border-color: var(--il-orange);
+    }
+
+    :host([theme="orange-gradient"][clickable]:hover) {
+        --ilw-button--background-color: transparent;
+        --ilw-button--border-color: var(--il-orange);
+        --ilw-button--foreground-color: var(--il-orange);
+        --ilw-button--focused-background-color: var(--il-orange);
+        --ilw-button--focused-foreground-color: #fff;
+        --ilw-button--focused-border-color: var(--il-orange);
+    }
+}
+
+:host {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--ilw-card--border-color);
+    background: var(--ilw-card--background);
+    margin-top: var(--ilw-card--margin-top);
+    margin-bottom: var(--ilw-card--margin-bottom);
+    color: var(--ilw-card--text-color);
+}
+
+:host[align="center"] {
+    text-align: center;
+}
+
+article {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+}
+
+.card-graphic {
+    display: none;
+    position: relative;
+}
+
+.graphic .card-graphic {
+    display: block;
+    min-height: var(--ilw-card--icon-height);
+}
+
+.card-icon {
+    position: absolute;
+    top: var(--ilw-card--content-padding-top);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ::slotted(*) {
+        max-height: var(--ilw-card--icon-height);
+        max-width: var(--ilw-card--icon-width);
+    }
+}
+
+.force-ratio .card-graphic {
+    aspect-ratio: var(--ilw-card--aspect-ratio);
+    width: 100%;
+
+    ::slotted([slot="image"]) {
+        aspect-ratio: var(--ilw-card--aspect-ratio);
+        width: 100%;
+        object-fit: cover;
+    }
+}
+
+.card-image ::slotted(*) {
+    width: 100%;
+}
+
+.card-content {
+    font-size: var(--ilw-card--font-size);
+    padding: var(--ilw-card--content-padding-top) var(--ilw-card--content-padding-right) 0 var(--ilw-card--content-padding-left);
+    flex: 1;
+}
+
+.card-footer {
+    padding: 0 var(--ilw-card--content-padding-right) var(--ilw-card--content-padding-bottom) var(--ilw-card--content-padding-left);
+}
diff --git a/src/ilw-card.styles.js b/src/ilw-card.styles.js
deleted file mode 100644
index a487d4a..0000000
--- a/src/ilw-card.styles.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { css } from "lit";
-
-export default css`
-    :host {
-        display: flex;
-        flex-direction: column;
-    }
-
-    article {
-        position: relative;
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: stretch;
-    }
-
-    .card-graphic {
-        display: none;
-        position: relative;
-    }
-
-    .graphic .card-graphic {
-        display: block;
-        min-height: var(--ilw-card--icon-height);
-    }
-
-    .card-icon ::slotted(*) {
-        max-height: var(--ilw-card--icon-height);
-        max-width: var(--ilw-card--icon-width);
-    }
-
-    .force-ratio .card-graphic {
-        aspect-ratio: var(--ilw-card--aspect-ratio);
-        width: 100%;
-    }
-
-    .force-ratio .card-graphic ::slotted([slot="image"]) {
-        aspect-ratio: var(--ilw-card--aspect-ratio);
-        width: 100%;
-        object-fit: cover;
-    }
-
-    .card-image ::slotted(*) {
-        width: 100%;
-    }
-
-    .card-icon {
-        position: absolute;
-        top: var(--ilw-card--content-padding-top);
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .card-content {
-        font-size: var(--ilw-card--font-size);
-        padding: var(--ilw-card--content-padding-top)
-            var(--ilw-card--content-padding-right) 0
-            var(--ilw-card--content-padding-left);
-
-        flex: 1;
-    }
-
-    .card-footer {
-        padding: 0 var(--ilw-card--content-padding-right)
-            var(--ilw-card--content-padding-bottom)
-            var(--ilw-card--content-padding-left);
-    }
-`;