Har endret størrelse på slideshow (#122)

client/src/components/slideshow/RecipeSlideshow.tsx

@@ -52,7 +52,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
     }, [emblaApi]);
 
     return (
-        <section aria-label="Utvalgte oppskrifter" className="relative md:px-16">
+        <section aria-label="Utvalgte oppskrifter" className="relative md:px-2">
             {/* Vinduet: det skjuler slidene som ikke vises */}
             <div className="overflow-hidden" ref={emblaRef}>
                 {/* Raden med alle slidene som Embla flytter sidelengs */}
@@ -104,15 +104,15 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                 type="button"
                 aria-label="Forrige oppskrift"
                 onClick={() => emblaApi?.scrollPrev()}
-                className="absolute left-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
+                className="absolute -left-12 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
                <ArrowBackIcon/>
             </button>
             <button 
                 type="button"
                 aria-label="Neste oppskrift"
                 onClick={() => emblaApi?.scrollNext()}
-                className="absolute right-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
+                className="absolute -right-12 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
                 <ArrowForwardIcon/>
             </button>

client/src/routes/HomePage.tsx

@@ -18,7 +18,7 @@ export default function HomePage() {
   return (
     <main className="bg-background min-h-screen">
 
-      <div className="mx-auto px-6 py-10">
+      <div className="mx-auto px-6 pt-0 md:pt-2">
 
         {/* Viser en melding mens oppskriftene lastes eller hvis noe går galt. */}
         {loading && <p role="status">Laster oppskrifter ...</p>}