Begin getting a layout that has some semblance of a character sheet working.

styles/root.scss

@@ -1,9 +1,101 @@
 @use "./vars/_colours.scss" as *;
-@use "./mixins/sr-only.scss" as *;
 
-.screenreader {
-	background-color: $background;
-	color: $background;
+.dotdungeon {
+	container-type: size;
 
-	@include sr-only;
+	&.actor {
+		&--pc {
+			display: grid;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			grid-template-rows: repeat(12, minmax(0, 1fr));
+
+			.panel {
+				&--avatar {
+					grid-row: 1 / span 2;
+				}
+				&--stats {
+					grid-column: 2 / span 2;
+				}
+				&--skills {
+					grid-column: 2 / span 2;
+				}
+				&--backpack {
+					grid-row: 3 / span 5;
+				}
+				&--sync {}
+				&--aspect {
+					grid-row: span 2;
+				}
+				&--weapons {
+					grid-row: span 2;
+				}
+				&--roles {
+					grid-row: span 3;
+				}
+				&--spells {
+					grid-row: span 2;
+				}
+				&--mounts {}
+				&--summons {}
+				&--notes {}
+				&--storage {}
+			}
+		}
+	}
+
+	.panel {
+		background: white;
+		border: 2px solid black;
+
+		&__header {
+			background: black;
+			color: white;
+			display: flex;
+			flex-direction: row;
+
+			h2 {
+				flex-grow: 1;
+			}
+
+			.icon {
+				$size: 32px;
+				height: $size;
+				width: $size;
+				aspect-ratio: 1;
+			}
+		}
+	}
+}
+
+@container (max-width: $breakpoint-medium) {
+	.dotdungeon {
+		&.actor {
+			&--pc {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				grid-template-rows: repeat(12, minmax(0, 1fr));
+			}
+		}
+	}
+}
+
+@container (max-width: $breakpoint-small) {
+	.dotdungeon {
+		&.actor {
+			&--pc {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				grid-template-rows: repeat(12, minmax(0, 1fr));
+			}
+		}
+	}
+}
+
+@container (max-width: $breakpoint-extra-small) {
+	.dotdungeon {
+		&.actor {
+			&--pc {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				grid-template-rows: repeat(12, minmax(0, 1fr));
+			}
+		}
+	}
 }

styles/vars/_breakpoints.scss

@@ -0,0 +1,3 @@
+$breakpoint-medium: 700px;
+$breakpoint-small: 550px;
+$breakpoint-extra-small: 400px