make background pigs that hide from the footer 🐷🐷🐷

web/src/app/utleie/page.tsx

@@ -4,7 +4,7 @@ import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
-import { Pig } from "@/components/general/Pig";
+import { BgPig } from "@/components/general/BgPig";
 
 const VenueFragmentDefinition = graphql(`
   fragment Venue on VenuePage {
@@ -56,9 +56,7 @@ export default async function Page() {
     <main className="site-main" id="main">
       <PageHeader heading="Utleie" />
       <VenueList venues={venues} />
-      <div className="bg-pig">
-        <Pig type="key" />
-      </div>
+      <BgPig type="key" />
     </main>
   );
 }