Diseñar una sección de tarjetas de productos en CSS se vuelve mucho más simple cuando aplicas herencia para reutilizar estilos entre secciones que comparten estructura. En esta práctica trabajamos las cards de Cuidado de la salud y Decoración del hogar dentro de un proyecto en Visual Studio Code con Live Sass Compiler, replicando un diseño previo en Figma.

La idea es que identifiques los elementos repetidos, los marques con clases claras y aproveches selectores anidados para no duplicar código. Si estás aprendiendo HTML y CSS con SCSS, este flujo te ayuda a entender cuándo conviene usar variables y cuándo basta con un selector específico.

¿Cómo se estructura el HTML de una product card?

Antes de tocar estilos, conviene dejar lista la estructura semántica. Cada tarjeta vive dentro de una sección con su clase identificadora.

La jerarquía que armamos quedó así:

• Un div con clase card-section que agrupa todas las tarjetas.
• Un div con clase product-card por cada producto.
• Un SVG con el ícono de corazón reutilizado de secciones anteriores.
• Un div con clase product-image que contiene la imagen del producto.
• Una etiqueta h3 con el nombre del producto, por ejemplo cepillo de bambú.
• Un paragraph con la descripción corta, como paquete de dos unidades.

Meter la imagen dentro de un div propio facilita manipularla después con background-image y cover sin romper el aspect ratio [05:30].

¿Por qué envolver la imagen en un div? Porque te permite controlar tamaño, border-radius y posicionamiento sin que la imagen original se deforme cuando cambia el ancho de la card.

¿Cómo aplicar estilos compartidos con herencia en SCSS?

Aquí entra lo interesante de la herencia: en lugar de repetir reglas para cada sección, escribes una vez y dejas que los hijos reciban los estilos del contenedor.

A la etiqueta section le pasamos un width del 100%, height: auto y un background-color rosita temporal para identificarla visualmente. Como hay dos secciones (product-section e info-section), ambas reciben los mismos estilos automáticamente. Eso es justo lo que buscamos para mantener uniformidad [03:45].

Después agregamos un padding general. Probamos con 40px y se veía pegado, así que subimos a 60px y el respiro fue notorio. Ese mismo padding se replica abajo en Por qué nosotros sin escribir una línea extra.

Para los títulos, escribimos un selector section h2 que aplica:

• color usando la variable --primary-text-color.
• font-size de 2rem tras descartar 1.7rem por verse pequeño.
• font-family IBM Plex Sans heredada del proyecto.

¿Cuándo usar una clase específica en lugar del selector general?

Cuando quieres un estilo distinto solo para una sección. Por ejemplo, el h2 de healthcare debía verse más ligero, así que accedimos con .healthcare h2 y le pusimos font-weight: 300. Si hubiéramos modificado el selector global, todos los títulos del sitio se habrían adelgazado [07:50].

¿Qué hace font-weight 300 en CSS? Reduce el grosor del texto a una versión light. Sirve cuando quieres jerarquía visual sin recurrir a tamaños distintos.

¿Qué propiedades necesita una product card para verse bien?

Las cards arrancaron sin forma y fueron tomando carácter conforme sumamos propiedades clave.

El bloque base de .product-card quedó con:

• width: 12vw después de probar 15vw (muy grande) y 10vw (muy delgada).
• height: auto para que crezca según el contenido.
• background-color con la variable --secondary-color (el rosita del diseño).
• padding: 20px interno para separar texto e imagen del borde.
• border-radius: 8px tomado directo de la referencia en Figma [12:40].
• color: var(--primary-text-color) heredado a todos los hijos.

Usar vw (view width) hace que la card se ajuste al ancho de la pantalla, lo cual es base para diseño responsivo. Si trabajas pantalla completa fija, puedes usar píxeles, pero combinar vw y vh te prepara mejor para múltiples dispositivos.

¿Cómo evitar que la imagen rompa el diseño de la card?

El problema apareció al darle a la imagen width: 200px y height: 250px: era más ancha que la card y el padding se desbordaba. La solución fue doble.

Primero, ajustar el width de .product-card a 12vw para darle aire. Segundo, usar background-image con background-size: cover en el contenedor de la imagen, en lugar de cargarla como etiqueta img suelta. Eso preserva el aspect ratio sin importar el tamaño del contenedor [14:20].

También aplicamos border-radius: 6px a la imagen, porque al hacer zoom en Figma se notaba que las esquinas estaban suavizadas. Detalles así marcan la diferencia entre una card que se ve bien y una que se ve pulida.

¿Qué viene después de estilizar las cards?

Con la estructura, los colores y las dimensiones resueltas, el siguiente paso es acomodar las tarjetas en una cuadrícula. Para eso usaremos flexbox, que permite distribuir las seis cards de healthcare y las nueve de decoración del hogar sin escribir posicionamientos manuales.

Si llegaste hasta aquí, ya tienes el esqueleto visual de cada producto: imagen, título, descripción, ícono y paleta consistente. Cuéntame en los comentarios qué medida de vw te funcionó mejor para tus cards o si prefieres trabajar con píxeles fijos.