Update path styling

frontend/src/lib/components/Path.svelte

@@ -11,7 +11,6 @@
 	</div>
 	<div class="route-card-center">
 		<div class="name">
-			<div>Percorsi</div>
 			<div class="bold">{name}</div>
 		</div>
 	</div>
@@ -22,69 +21,40 @@
 	a {
 		text-decoration: inherit;
     	color: inherit;
-    	cursor: auto;
+    	cursor: pointer;
-	}
-	.bold {
-		font-weight: bold;
-	}
-	.route-card {
-		text-decoration: none;
-		display: block;
-		flex: 1;
-		--route-card-radius: 45px;
-		border-radius: var(--route-card-radius);
-		box-shadow: 0 0 27px #ccc;
-		margin: 0 auto;
-		margin-top: 10px;
-		margin-bottom: 10px;
-		width: 90%;
-		display: flex;
-		background-color: var(--card-background-color);
-		
-	}
-	.route-card-center {
-		font-size: 18px;
-	}
-
-	.route-card > * {
-		flex: 1;
-	}
-
-	.route-card-left {
-		flex: 0 1 20%;
-		border-top-left-radius: var(--route-card-radius);
-		border-bottom-left-radius: var(--route-card-radius);
 		display: grid;
-		place-items: center;
+		grid-template-columns: 100px auto 100px;
-		max-width: 30%;
+		max-width: 100%;
+		width: calc(100% - 20px);
+		margin: 0 auto;
 	}
-	.route-card-left img {
-		display: block;
-		max-width: 55%;
-		height: auto;
-	}
-
 	.route-card-right {
-		flex: 0 1 20%;
+		border-top-right-radius: 45px;
-		border-top-right-radius: var(--route-card-radius);
+		border-bottom-right-radius: 45px;
-		border-bottom-right-radius: var(--route-card-radius);
 		background-image: url('/images/test-1.jpg');
 		background-position: center;
 		background-size: cover;
-		max-width: 30%;
 	}
 
-	.route-card .name {
+	.route-card-left {
+		border-top-left-radius: 45px;
+		border-bottom-left-radius: 45px;
 		display: grid;
-		height: 100%;
+		place-content: center;
-		align-content: center;
-		padding: 0;
-		margin-left: 10px;
-		margin-right:10px;
-		font-size: 27px;
 	}
 
-	.route-card .name > * {
+	.route-card-left img {
-		flex: 1;
+		width: 100%;
+	}
+
+	.route-card-center {
+		display: grid;
+		place-content: center;
+		font-weight: bold;
+		font-size: 20px;
+		padding: 4px;
+		max-width: 100%;
+		text-overflow: ellipsis;
+		text-align: center;
 	}
 </style>

frontend/src/routes/+page.svelte

@@ -48,5 +48,6 @@
 		grid-row-end: 7;
 		display: grid;
 		width: 100%;
+		gap: 5px;
 	}
 </style>