Add the primitive dropdown styling for the skills

styles/root.scss

@@ -3,21 +3,11 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
 
-.dotdungeon {
-	--breakpoint-medium: 700px;
-	--breakpoint-small: 550px;
-	--breakpoint-extra-small: 400px;
-
-
-	container-type: size;
-
-	> .window-content {
-		padding: 0;
-		background: $background;
-	}
-
+// Reset the parts of Foundry's styling which gets in the way of what I want
+.dotdungeon > .window-content {
 	h2, h3, h4, h5, h6 {
 		@include fvtt_reset;
+		display: block;
 		font-family: $title-font;
 		margin: 0;
 	}
@@ -33,5 +23,17 @@
 	}
 }
 
+// Styling that doesn't belong to any particular part of my sheet
+.dotdungeon {
+	container-type: size;
+
+	> .window-content {
+		padding: 0;
+		background: $background;
+	}
+}
+
 @import "./sheets/partials/stat.scss";
+@import "./sheets/partials/skill.scss";
+
 @import "./sheets/actor/mvp.scss";

styles/sheets/actor/mvp.scss

@@ -35,6 +35,12 @@
 			}
 			&--skills {
 				grid-area: skills;
+
+				.panel__content {
+					display: grid;
+					grid-template-columns: repeat(2, minmax(0, 1fr));
+					grid-template-rows: repeat(2, minmax(0, min-content));
+				}
 			}
 			&--backpack {
 				grid-area: backpack;

styles/sheets/partials/skill.scss

@@ -0,0 +1,22 @@
+.dotdungeon .skill {
+	display: flex;
+	flex-direction: column;
+	justify-content: left;
+	align-items: center;
+
+	&-group {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
+		margin-bottom: 8px;
+		gap: 4px;
+
+		h3 {
+			margin-top: 8px;
+			font-size: 1.2em;
+			width: 100%;
+			text-align: center;
+		}
+	}
+}