diff --git a/narrow.css b/narrow.css
new file mode 100644
index 0000000..d1dc7ee
--- /dev/null
+++ b/narrow.css
@@ -0,0 +1,33 @@
+.build-overall-container {
+    grid-column: 1;
+    grid-row: 2;
+}
+.spell-info-container {
+    grid-column: 2;
+    grid-row: 2;
+}
+.summary {
+    padding: 2% 4% 4%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5px;
+    grid-auto-rows: minmax(60px, auto);
+}
+
+.build, .spells .misc {
+    padding: 2%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    grid-auto-rows: minmax(60px, auto);
+    width: 94%;
+    background: #121516;
+}
+
+.iteminput {
+
+}
+
+.skp-input {
+
+}
diff --git a/wide.css b/wide.css
new file mode 100644
index 0000000..c1672c9
--- /dev/null
+++ b/wide.css
@@ -0,0 +1,32 @@
+.build-overall-container {
+    grid-column:3;
+}
+.spell-info-container {
+    grid-column:4;
+}
+.summary {
+    padding: 2% 4% 4%;
+    display: grid;
+    grid-template-columns: 1.25fr 1.25fr 1fr 1fr;
+    grid-auto-columns: minmax(200px, auto);
+    gap: 5px;
+    grid-auto-rows: minmax(60px, auto);
+}
+
+.build, .spells, .misc {
+    padding: 2%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    grid-auto-rows: minmax(60px, auto);
+    width: 94%;
+    background: #121516;
+}
+
+.iteminput {
+
+}
+
+.skp-input {
+
+}