Improve design

src/components/Footer/Stickynav.component.tsx

@@ -12,7 +12,7 @@ import Hamburger from './Hamburger.component';
  */
 const Stickynav = () => (
   <nav id="footer" className="fixed bottom-0 z-50 w-full mt-[10rem] md:hidden">
-    <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800">
+    <div className="flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800">
       <Hamburger />
       <div
         className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"

src/components/Header/Header.component.tsx

@@ -25,7 +25,7 @@ const Header = ({ title }: IHeaderProps) => (
         key="pagetitle"
       />
     </Head>
-    <div className="container mx-auto px-6">
+    <div className="w-full mx-auto px-6">
       <Navbar />
     </div>
   </>

src/components/Index/Hero.component.tsx

@@ -7,7 +7,7 @@ import Button from '../UI/Button.component';
  * @returns {JSX.Element} - Rendered component
  */
 const Hero = () => (
-  <section className="relative w-full h-[60vh] overflow-hidden">
+  <section className="relative w-full h-[60vh] overflow-hidden p-8">
     <div className="absolute inset-0">
       <Image
         src="/images/hero.jpg"
@@ -19,16 +19,13 @@ const Hero = () => (
       />
       <div className="absolute inset-0 bg-black bg-opacity-30" />
     </div>
-    
+
     <div className="relative h-full container mx-auto flex items-center p-4 md:p-0">
       <div className="max-w-xl">
         <h1 className="text-3xl md:text-4xl lg:text-5xl font-light text-white mb-6">
           Stripete Zig Zag Pute Sett
         </h1>
-        <Button 
-          href="/produkter"
-          variant="hero"
-        >
+        <Button href="/produkter" variant="hero">
           Se Utvalget
         </Button>
       </div>

src/components/Layout/Layout.component.tsx

@@ -56,7 +56,7 @@ const Layout = ({ children, title }: ILayoutProps) => {
   }, [refetch]);
 
   return (
-    <div className="flex flex-col min-h-screen w-full mx-auto">
+    <div className="flex flex-col min-h-screen mx-auto md:px-8 md:max-w-[97%]">
       <Header title={title} />
       {title === 'Hjem' ? (
         <main className="flex-1 px-4 md:px-0">{children}</main>

src/components/Product/DisplayProducts.component.tsx

@@ -46,7 +46,7 @@ interface IDisplayProductsProps {
  */
 
 const DisplayProducts = ({ products }: IDisplayProductsProps) => (
-  <section className="container mx-auto bg-white py-12">
+  <section className="py-12">
     <div
       id="product-container"
       className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
@@ -77,7 +77,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
             return (
               <div key={uuidv4()} className="group">
                 <Link href={`/produkt/${encodeURIComponent(slug)}`}>
-                  <div className="aspect-[3/4] relative overflow-hidden bg-gray-100">
+                  <div className="relative overflow-hidden bg-gray-100">
                     {image ? (
                       <img
                         id="product-image"

src/components/Product/ProductCard.component.tsx

@@ -32,7 +32,7 @@ const ProductCard = ({
 
   return (
     <div className="group">
-      <div className="aspect-[3/4] overflow-hidden bg-gray-100 relative">
+      <div className="overflow-hidden bg-gray-100 relative">
         <Link href={`/produkt/${slug}`}>
           {image?.sourceUrl ? (
             <Image

src/components/Product/SingleProduct.component.tsx

@@ -59,7 +59,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
           <div className="flex flex-col md:grid md:grid-cols-2 md:gap-8">
             {/* Image Container */}
             <div className="mb-6 md:mb-0 group">
-              <div className="max-w-xl mx-auto aspect-[3/4] relative overflow-hidden bg-gray-100">
+              <div className="max-w-xl mx-auto relative overflow-hidden bg-gray-100">
                 <img
                   id="product-image"
                   src={