Buenas, tengo este codigo que es para una bento grid responsive. El pronlema es que cuando el tamaño es md no se aplican los valores de start de col y row. Podria solucionarlo para que se cumpla:

"use client";

import { motion } from "framer-motion";
import React from "react";
import { AuroraBackground } from "@/components/ui/aurora-background";
import { cards } from "@/data/bentoCardData";

export default function Home() {
  return (
    <AuroraBackground>
      <motion.div
        initial={{ opacity: 0.0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.3,
          duration: 0.8,
          ease: "easeInOut",
        }}
        className="
          relative grid gap-6 py-8 px-16 max-w-[1675px] mx-auto w-full h-[200vh] sm:px-32
          grid-cols-1 md:grid-cols-2 md:grid-rows-6 lg:px-28 xl:grid-cols-12 xl:grid-rows-12
          xl:py-10 xl:px-16 lg:py-18 2xl:p-28 2xl:gap-8
        "
      >
        {cards.map((card, index) => (
          <motion.div
            key={card.id}
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            className={ `bg-white bg-opacity-10 rounded-lg shadow-lg backdrop-blur-md ${card.title || card.content ? "p-6" : ""} col-span-1 md:col-span-${card.mdcolSpan} md:row-span-${card.mdrowSpan} md:col-start-${card.mdcolStart} md:row-start-${card.mdrowSpan} xl:col-span-${card.colSpan} xl:row-span-${card.rowSpan} xl:col-start-${card.colStart} xl:row-start-${card.rowStart}` }
          >
            {card.component ? (
              <card.component /> // Renderiza el componente aquí
            ) : card.title || card.content ? (
              <>
                <h3 className="text-2xl font-bold mb-4 text-black dark:text-white">
                  {card.title}
                </h3>
                <p className="text-lg text-black dark:text-white">
                  {card.content}
                </p>
              </>
            ) : card.image ? (
              <img
                src={card.image}
                alt={card.title || "Card image"}
                className="object-cover w-full h-full rounded-lg"
              />
            ) : null}
          </motion.div>
        ))}
      </motion.div>
    </AuroraBackground>
  );
}

import { IconCloudHero } from "@/components/IconCloud";
import WorkExperienceTimeline from "@/components/WorkTimeline";

export interface Card {
  id: number;
  title?: string;
  content?: string;
  image?: string;
  colSpan: number;
  rowSpan: number;
  mdrowSpan: number;
  mdcolSpan: number;
  colStart: number;
  rowStart: number;
  mdcolStart?: number;
  mdrowStart?: number;
  component?: React.ComponentType<any>;
}

export const cards: Card[] = [
  {
    id: 1,
    title: "Alejandro Marcos",
    content: "Ingeniero de Software",
    colSpan: 4,
    rowSpan: 2,
    mdrowSpan: 1,
    mdcolSpan: 1,
    mdcolStart: 1,
    mdrowStart: 1,
    colStart: 1,
    rowStart: 1,
  },
  {
    id: 2,
    image: "/images/alejandro-marcos.jpg",
    colSpan: 4,
    rowSpan: 8,
    mdrowSpan: 3,
    mdcolSpan: 1,
    mdcolStart: 2,
    mdrowStart: 1,
    colStart: 5,
    rowStart: 1,
  },
  {
    id: 3,
    component: IconCloudHero,
    colSpan: 4,
    rowSpan: 6,
    mdrowSpan: 2,
    mdcolSpan: 1,
    mdcolStart: 1,
    mdrowStart: 3,
    colStart: 9,
    rowStart: 1,
  },
  {
    id: 4,
    component: WorkExperienceTimeline,
    colSpan: 4,
    rowSpan: 6,
    mdrowSpan: 1,
    mdcolSpan: 2,
    mdcolStart: 1,
    mdrowStart: 5,
    colStart: 1,
    rowStart: 3,
  },
  {
    id: 5,
    title: "Card 5",
    content: "Content 5",
    colSpan: 4,
    rowSpan: 3,
    mdrowSpan: 1,
    mdcolSpan: 1,
    mdcolStart: 1,
    mdrowStart: 7,
    colStart: 9,
    rowStart: 7,
  },
  {
    id: 6,
    title: "Card 6",
    content: "Content 6",
    colSpan: 8,
    rowSpan: 4,
    mdrowSpan: 1,
    mdcolSpan: 1,
    mdcolStart: 1,
    mdrowStart: 8,
    colStart: 1,
    rowStart: 9,
  },
  {
    id: 7,
    title: "Card 7",
    content: "Content 7",
    colSpan: 4,
    rowSpan: 3,
    mdrowSpan: 1,
    mdcolSpan: 1,
    mdcolStart: 1,
    mdrowStart: 9,
    colStart: 9,
    rowStart: 10,
  }
];