Revamp the post nav (the "prev/next" post one)

sass/_post-nav.scss

@@ -1,46 +1,41 @@
 #post-nav {
 	display: flex;
+	gap: 0.25rem;
+	max-width: 100vw;
 
 	.post-nav-item {
+		flex: 1 1 0;
 		transition: var(--transition);
-		width: 50%;
+		border-radius: var(--rounded-corner);
+		padding: 1rem 1rem 0.5rem;
+		width: 0;
 		text-decoration: none;
 
-		&:hover .post-title {
+		&:hover {
-			color: var(--primary-color);
+			box-shadow: var(--edge-highlight);
+			background-color: var(--primary-color-alpha);
+
+			.post-title {
+				color: var(--primary-color);
+			}
 		}
 
 		&:active {
 			transform: scale(var(--active));
 		}
 
-		&.post-nav-prev {
+		&.post-nav-prev .nav-arrow::before {
-			transform-origin: left;
+			content: "← ";
-			padding-inline-end: 1rem;
 
 			:root[dir*="rtl"] & {
-				transform-origin: right;
+				content: "→ ";
-			}
-
-			.nav-arrow::before {
-				content: "← ";
-
-				:root[dir*="rtl"] & {
-					content: "→ ";
-				}
 			}
 		}
 
 		&.post-nav-next {
-			transform-origin: right;
 			margin-inline-start: auto;
-			padding-inline-start: 1rem;
 			text-align: end;
 
-			:root[dir*="rtl"] & {
-				transform-origin: left;
-			}
-
 			.nav-arrow::after {
 				content: " →";
 
@@ -54,11 +49,24 @@
 			margin-bottom: 0.5rem;
 			color: var(--fg-muted-5);
 			font-weight: normal;
+			line-height: normal;
 		}
 
 		.post-title {
+			display: block;
 			transition: var(--transition);
+			overflow: hidden;
 			color: var(--fg-color);
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	@media only screen and (max-width: 720px) {
+		flex-direction: column;
+
+		.post-nav-item {
+			width: 100%;
 		}
 	}
 }