Fixed errors

src/app/components/Hero.tsx

@@ -1,7 +1,10 @@
 import styled from "styled-components";
 import {
+  SmallMobileBreakpoint,
   MobileBreakpoint,
   MobileTitleXL,
+  MobileTitleL,
+  SpacingS,
   SpacingM,
   SpacingXXL,
   TitleXL,
@@ -21,7 +24,7 @@ const Container = styled.div`
   overflow: hidden;
 
   @media (max-width: ${MobileBreakpoint}) {
-    padding: ${SpacingM};
+    padding: ${SpacingS};
   }
 
   &::before {
@@ -51,6 +54,10 @@ const Title = styled.h1`
   @media (max-width: ${MobileBreakpoint}) {
     font-size: ${MobileTitleXL};
   }
+
+  @media (max-width: ${SmallMobileBreakpoint}) {
+    font-size: ${MobileTitleL};
+  }
 `;
 
 const ButtonContainer = styled.div`

src/app/genericComponents/EmblaCarousel.tsx

@@ -8,7 +8,6 @@ import {
 } from "./EmblaCarouselArrowButtons";
 import useEmblaCarousel from "embla-carousel-react";
 import { ImageInformation } from "@data/interfaces";
-import Image from "next/image";
 
 type PropType = {
   slides: ImageInformation[];
@@ -33,12 +32,9 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
           {slides.map((index) => (
             <div className="embla__slide" key={index.index}>
               <div>
-                <Image
+                <img
                   src={index.url}
                   alt={index.alt}
-                  width={800}
-                  height={600}
-                  priority
                   className="embla__slide__image"
                 />
               </div>

src/app/genericComponents/tokens.ts

@@ -42,6 +42,8 @@ export const QuestionBoxBackgroundColor: string = "#304697";
 // Responsive breakpoints
 export const MobilePixels: number = 640;
 export const MobileBreakpoint: string = MobilePixels + "px";
+export const SmallMobilePixels: number = 370;
+export const SmallMobileBreakpoint: string = SmallMobilePixels + "px";
 export const MaxScreenSize: string = "1200px";
 
 // Spacing