export default function MultipleColumns() {
  return (
    <>
      <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-2">
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
      </section>
      <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-4">
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-3" />
      </section>
      <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-4">
        <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-3" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
      </section>
      <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-3">
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
      </section>
      <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-4">
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
      </section>
      <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-8">
        <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-2" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-4" />
        <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-2" />
      </section>
    </>
  );
}
Containers
