Add the ability to create custom items

styles/global/design-v2.scss

@@ -4,6 +4,7 @@
 		border: 2px solid black;
 		background: none;
 		box-shadow: none;
+		height: unset;
 
 		&.left { text-align: left; }
 		&.center { text-align: center; }
@@ -19,6 +20,10 @@
 		flex-direction: row;
 		align-items: center;
 		transition: all ease-in-out 50ms;
+		border: 2px solid black;
+		border-radius: 4px;
+		gap: 4px;
+		padding: 4px;
 
 		&:focus-within {
 			transform: scale(102%);
@@ -39,6 +44,10 @@
 		display: flex;
 		flex-direction: column;
 		transition: all ease-in-out 50ms;
+		border: 2px solid black;
+		border-radius: 4px;
+		gap: 4px;
+		padding: 4px;
 
 		&:focus-within {
 			transform: scale(102%);

styles/root.scss

@@ -17,6 +17,7 @@
 @use "./sheets/actor/mvp.scss";
 @use "./sheets/actor/mob/mob.scss";
 @use "./sheets/actor/sync/basic.scss";
+@use "./sheets/items/custom.scss";
 @use "./sheets/items/aspect.scss";
 @use "./sheets/items/spell.scss";
 @use "./sheets/items/pet.scss";

styles/sheets/items/custom.scss

@@ -0,0 +1,16 @@
+.item--custom {
+	padding: 8px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: repeat(3, min-content) 1fr;
+	grid-template-areas:
+		"name name"
+		". ."
+		"usage usage"
+		"description description";
+	gap: 8px;
+
+	.name { grid-area: name; }
+	.usage { grid-area: usage; }
+	.description { grid-area: description; }
+}