style: card grid on mobile

Author: AbstractFruitFactory

src/lib/components/card-grid/CardGrid.svelte

@@ -78,11 +78,6 @@
 		justify-content: center;
 		place-items: center;
 
-		@include mobile {
-			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-			gap: var(--spacing-md);
-		}
-
 		&:last-child {
 			padding-bottom: var(--spacing-lg);
 		}
@@ -91,11 +86,4 @@
 	.card-wrapper {
 		width: 100%;
 	}
-
-	@media (max-width: 640px) {
-		.card-grid {
-			grid-template-columns: 1fr;
-			grid-template-columns: repeat(2, 1fr);
-		}
-	}
 </style>

src/lib/components/recipe-card/RecipeCard.svelte

@@ -196,7 +196,11 @@
 		class="portal-dropdown-container"
 		style="position: fixed; top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; z-index: 1000;"
 	>
-		<Dropdown bind:isOpen={menuOpen} nbrOfItems={Object.keys(menu.options).length} swallowOn={menuButton}>
+		<Dropdown
+			bind:isOpen={menuOpen}
+			nbrOfItems={Object.keys(menu.options).length}
+			swallowOn={menuButton}
+		>
 			{#snippet dropdownContent(item)}
 				{#each Object.entries(menu.options) as [label, action], i}
 					{#snippet menuLabel()}
@@ -224,6 +228,7 @@
 		grid-template-rows: 60% auto;
 		height: 435px;
 		width: 100%;
+		min-width: 200px;
 		border-radius: var(--border-radius-2xl);
 		text-decoration: none;
 		overflow: hidden;
@@ -238,14 +243,6 @@
 			height: 300px;
 			grid-template-rows: 45% auto;
 
-			.content {
-				padding: var(--spacing-sm);
-			}
-
-			.meta-single > span {
-				font-size: var(--font-size-xs);
-			}
-
 			.action-buttons {
 				top: var(--spacing-sm);
 				right: var(--spacing-sm);
@@ -299,7 +296,7 @@
 		-webkit-box-orient: vertical;
 
 		@include mobile {
-			font-size: var(--font-size-lg);
+			font-size: var(--font-size-xl);
 		}
 	}