refactor: improve styling a bit

style/artist.css

@@ -1,25 +1,68 @@
-artist-albumlist #artist-albumlist p {
-  color: #181d31;
-  font-weight: 500;
+#artist-albumlist {
+	color: #181d31;
+	font-weight: 500;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 150px);
+	gap: 1.5rem;
+}
+
+#artwork-preview {
+	width: 150px;
+	height: 150px;
+	border-radius: 5px;
+	border: 1px solid #ddd;
+}
+
+#artist-image {
+	border-radius: 50%;
+	border: 2px solid #ddd;
+}
+
+#artist-name {
+	text-align: center;
+}
+
+#artist-single-album {
+	color: #111;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	text-align: center;
 }
 
 .dark #artist-albumlist p {
-  color: #ddd;
+	color: #ddd;
 }
 
 #artist-albumlist small {
-  font-size: 1.5rem;
-  color: #333;
+	font-size: 1.5rem;
+	color: #333;
 }
 
 .dark #artist-albumlist small {
-  color: #ccc;
+	color: #ccc;
 }
 
 #metadata p {
-  color: #171717;
+	color: #171717;
 }
 
 .dark #metadata p {
-  color: #ddd;
+	color: #ddd;
+}
+
+#artist-section {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+#artist-sections {
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+
+#artist-section h2 {
+	font-size: 2rem;
 }

style/layout.css

@@ -5,15 +5,23 @@
 }
 
 #container {
-	display: grid;
 	padding: 5rem 0;
-	grid-template-columns: 24rem calc(1024px - 56rem) 24rem;
 	width: 1024px;
 	margin: 0 auto;
-	gap: 4rem;
+	display: grid;
 	flex: 1;
 }
 
+.trio-split {
+	grid-template-columns: 24rem calc(1024px - 56rem) 24rem;
+	gap: 4rem;
+}
+
+.duo-split {
+	grid-template-columns: 24rem 1fr;
+	gap: 4rem;
+}
+
 .main {
 	flex-grow: 1;
 }

style/main.css

@@ -57,6 +57,10 @@ a {
 	text-decoration: none;
 }
 
+a:hover {
+	text-decoration: underline;
+}
+
 body.dark {
 	background-color: #181d31;
 }