Update CSS guidelines + Prefer rem

src/package/styles/classes/card.postcss

@@ -7,11 +7,10 @@
 
 	background-color: var(--color-raised-bg);
 	border-radius: var(--rounded-lg);
-	overflow: hidden;
 	box-shadow: var(--shadow-raised), var(--shadow-inset);
 
 	padding: var(--padding);
-	grid-gap: 1rem;
+	gap: 1rem;
 	max-width: 100%;
 
 	.profile-picture {
@@ -20,11 +19,11 @@
 
 	&--gap {
 		&-compressed {
-			grid-gap: 0.6rem;
+			gap: 0.5rem;
 		}
 
 		&-none {
-			grid-gap: 0;
+			gap: 0;
 		}
 	}
 
@@ -34,26 +33,20 @@
 		}
 	}
 
-	&--overflow-visible {
-		overflow: visible;
-	}
-
 	&__banner {
 		--inverse-padding: calc(var(--padding) * -1);
 		margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
 		z-index: 0;
 		background-color: var(--color-divider);
+		height: 6.5rem; /* Matches height of 2 buttons exactly */
+		object-fit: cover;
+		object-position: center;
+		border-radius: var(--rounded-top);
 
 		&:-moz-loading {
 			visibility: hidden;
 		}
 
-		&--short {
-			height: 6.5rem;
-			object-fit: cover;
-			object-position: center;
-		}
-
 		&--dark {
 			filter: brightness(0.7);
 		}
@@ -67,7 +60,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
-		grid-gap: 0.5rem;
+		gap: 0.5rem;
 
 		z-index: 1;
 
@@ -88,7 +81,7 @@
 	}
 
 	&--pad-x {
-		--padding: 1rem 1.3rem;
+		--padding: 1rem 1.5rem;
 	}
 
 	&.markdown {