Refactor ProspectGrid styles: update card width variables and adjust grid layout for improved responsiveness

FoodsharingSiegen.Server/Controls/ProspectGrid.razor.css

@@ -1,12 +1,17 @@
 .prospect-grid {
     /* Default card width range. Override via a modifier class on ProspectGrid. */
-    --pc-min-width: 200px;
+    --pc-min-width: 320px;
-    --pc-max-width: 350px;
+    --pc-max-width: 320px;
 
     display: grid;
     gap: 1rem;
     width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pc-min-width)), var(--pc-max-width)));
+    grid-template-columns: repeat(auto-fit, minmax(var(--pc-min-width), 1fr));
-    justify-content: center;
+    justify-items: center;
     align-items: stretch;
+}
+
+.prospect-grid > * {
+    width: 100%;
+    max-width: var(--pc-max-width);
 }

FoodsharingSiegen.Server/FoodsharingSiegen.Server.csproj

@@ -28,7 +28,7 @@
     </PropertyGroup>
     
     <ItemGroup>
-      <PackageReference Include="DartSassBuilder" Version="1.1.0" />
+      <PackageReference Include="AspNetCore.SassCompiler" Version="1.81.0" />
       <PackageReference Include="MailKit" Version="4.4.0" />
       <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.3" />
       <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.3">

FoodsharingSiegen.Server/wwwroot/css/_utilities.scss

@@ -1,9 +1,9 @@
 // Breakpoints matching typical Bootstrap breakpoints
 $breakpoints: (
-  "sm": 576px,
+  sm: 576px,
-  "md": 768px,
+  md: 768px,
-  "lg": 992px,
+  lg: 992px,
-  "xl": 1200px
+  xl: 1200px
 );
 
 // Spacer values (1 to 5) mapped to rem