Card Overlay Fade

import styles from "./styles.module.css";

export default function CardOverlayFade({ cards = [] }) {
  return (
    <div className={styles.grid}>
      {cards.map((card) => (
        <a key={card.title} href={card.href} className={styles.card}>
          <div
            className={styles.image}
            style={{ backgroundImage: `url(${card.image})` }}
          />
          <div className={styles.overlay} />
          <div className={styles.cardContent}>
            <h3 className={styles.title}>{card.title}</h3>
            <p className={styles.description}>{card.description}</p>
            <span className={styles.cta}>View Project →</span>
          </div>
        </a>
      ))}
    </div>
  );
}