Containers

export default function SimpleContainerWithPadding() {
  return (
    <section className="mx-auto w-full max-w-7xl px-4">
      <div className="h-52 border-4 border-dotted bg-muted" />
    </section>
  );
}

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-muted" />
        <div className="h-52 border-4 border-dotted bg-muted" />
      </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-muted" />
        <div className="h-52 border-4 border-dotted bg-muted 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-muted md:col-span-3" />
        <div className="h-52 border-4 border-dotted bg-muted" />
      </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-muted" />
        <div className="h-52 border-4 border-dotted bg-muted" />
        <div className="h-52 border-4 border-dotted bg-muted" />
      </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-muted" />
        <div className="h-52 border-4 border-dotted bg-muted" />
        <div className="h-52 border-4 border-dotted bg-muted" />
        <div className="h-52 border-4 border-dotted bg-muted" />
      </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-muted md:col-span-2" />
        <div className="h-52 border-4 border-dotted bg-muted md:col-span-4" />
        <div className="h-52 border-4 border-dotted bg-muted md:col-span-2" />
      </section>
    </>
  );
}

export default function SmallerContainerWithPadding() {
  return (
    <section className="mx-auto w-full max-w-3xl px-4">
      <div className="h-52 border-4 border-dotted bg-muted" />
    </section>
  );
}

export default function BreakpointContainerWithPadding() {
  return (
    <section className="max-w-7xl mx-auto w-full px-4">
      <div className="h-52 border-4 border-dotted bg-muted" />
    </section>
  );
}

export default function FullContainerNoMobilePadding() {
  return (
    <section className="mx-auto w-full max-w-7xl sm:px-4">
      <div className="h-52 border-4 border-dotted bg-muted" />
    </section>
  );
}

export default function SmallContainerWithBackground() {
  return (
    <section className="bg-muted md:px-4">
      <div className="mx-auto max-w-3xl bg-background p-4">
        <div className="h-52 border-4 border-dotted bg-muted" />
      </div>
    </section>
  );
}