From fa6116d42bcc2c620dd26adf8e3c95ef44308efd Mon Sep 17 00:00:00 2001
From: josemi1189 <jose1189@gmail.com>
Date: Wed, 25 Feb 2026 11:14:56 +0100
Subject: [PATCH] style: update styles for desktop and add optional classname
 prop to the Card component

---
 .../src/common/components/card.component.tsx  | 11 ++++++--
 .../embalse-provincia-list.component.tsx      | 26 ++++++++++---------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/front/src/common/components/card.component.tsx b/front/src/common/components/card.component.tsx
index 1bb2a11..cfa9b5c 100644
--- a/front/src/common/components/card.component.tsx
+++ b/front/src/common/components/card.component.tsx
@@ -2,12 +2,19 @@ import React from "react";
 
 interface Props {
   children?: React.ReactNode;
+  className?: string;
 }
 
 export const Card: React.FC<Props> = (props: Props) => {
-  const { children } = props;
+  const { children, className } = props;
   return (
-    <div className="bg-base-100 m-8 flex flex-col gap-6 rounded-2xl p-4">
+    <div
+      className={
+        className
+          ? className
+          : "bg-base-100 m-8 flex flex-col gap-6 rounded-2xl p-4"
+      }
+    >
       {children}
     </div>
   );
diff --git a/front/src/pods/embalse-provincia-list/embalse-provincia-list.component.tsx b/front/src/pods/embalse-provincia-list/embalse-provincia-list.component.tsx
index e9b58fc..5b72fa0 100644
--- a/front/src/pods/embalse-provincia-list/embalse-provincia-list.component.tsx
+++ b/front/src/pods/embalse-provincia-list/embalse-provincia-list.component.tsx
@@ -5,18 +5,20 @@ import Link from "next/link";
 
 export const EmbalseProvinciaList: React.FC = () => {
   return (
-    <Card>
-      <h2>Embalses por provincias</h2>
-      <div className="flex flex-col gap-4">
-        {PROVINCIAS.map(({ id, name }) => (
-          <Link
-            key={id}
-            href={`/embalse-provincia/${id}`}
-            className="link-accessible"
-          >
-            {name}
-          </Link>
-        ))}
+    <Card className="mx-auto w-full pt-6 pr-4 pb-6 pl-4 md:max-w-[900px] md:p-8">
+      <div className="bg-base-100 rounded-2xl p-6">
+        <h2>Embalses por provincias</h2>
+        <div className="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2 md:grid-cols-3">
+          {PROVINCIAS.map(({ id, name }) => (
+            <Link
+              key={id}
+              href={`/embalse-provincia/${id}`}
+              className="link-accessible"
+            >
+              {name}
+            </Link>
+          ))}
+        </div>
       </div>
     </Card>
   );