import Skeleton from "@/app/_lib/components/skeleton-loading";

export default function Loading() {
  return (
    <>
      <section className="mt-24 w-full overflow-hidden rounded-lg !aspect-video max-h-[400px]">
        <Skeleton className="h-[500px]" />
      </section>
      <section className="grid max-w-full grid-cols-12 gap-8 mt-10 mb-5 max-[980px]:gap-0">
        <div className="col-span-7 max-[980px]:col-span-12 max-[980px]:hidden">
          <Skeleton className="h-[480px] max-[980px]:!hidden" />
        </div>
        <div className="col-span-5 max-[980px]:col-span-12">
          <Skeleton className="h-[64px]" />
          <Skeleton className="h-[64px]" />
          <Skeleton className="h-[64px]" />
          <Skeleton className="h-[64px]" />
          <Skeleton className="h-[64px]" />
          <Skeleton className="h-[64px]" />
          <Skeleton className="h-[64px]" />
        </div>
      </section>
    </>
  );
}