style: layout corrections on the travel page

Author: anyulled

src/views/Travel/Travel.tsx

@@ -1,30 +1,35 @@
-import { FC, useEffect } from "react";
-import { Venue } from "./Venue";
-import { ToBarcelona } from "./ToBarcelona";
+import React, {FC, useEffect} from "react";
+import {Venue} from "./Venue";
+import {ToBarcelona} from "./ToBarcelona";
 import data from "../../data/2024.json";
-import { StyledWaveContainer } from "../Speakers/Speakers.style";
+import {StyledWaveContainer} from "../Speakers/Speakers.style";
 import styled from "styled-components";
-import { Color } from "../../styles/colors";
-import { Accommodation } from "./Accommodation";
+import {Color} from "../../styles/colors";
+import {Accommodation} from "./Accommodation";
 
 const StyledTravel = styled.div`
-  .top {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
-    height: 51px;
-    background-color: ${Color.LIGHT_BLUE};
-    border-top: 1px solid ${Color.LIGHT_BLUE};
-  }
 
-  .bottom {
-    clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
-    margin-top: -50px;
-    height: 50px;
-    background-color: ${Color.DARK_BLUE};
-  }
+    max-width: 85rem;
+    margin-left: auto;
+    margin-right: auto;
+    
+    .top {
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
+        height: 51px;
+        background-color: ${Color.LIGHT_BLUE};
+        border-top: 1px solid ${Color.LIGHT_BLUE};
+    }
 
-  .to-barcelona {
-    background-color: ${Color.DARK_BLUE};
-  }
+    .bottom {
+        clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
+        margin-top: -50px;
+        height: 50px;
+        background-color: ${Color.DARK_BLUE};
+    }
+
+    .to-barcelona {
+        background-color: ${Color.DARK_BLUE};
+    }
 `;
 
 const Travel: FC<React.PropsWithChildren<unknown>> = () => {

src/views/Travel/Venue.tsx

@@ -1,34 +1,34 @@
-import React, { FC, Suspense } from "react";
+import React, {FC, Suspense} from "react";
 import venue from "../../assets/images/la-farga.png";
 import GoogleMapReact from "google-map-react";
 import "./map.css";
 import FGC from "../../assets/images/fgc.png";
 import styled from "styled-components";
 import TitleSection from "../../components/SectionTitle/TitleSection";
-import { Color } from "../../styles/colors";
+import {Color} from "../../styles/colors";
 import {
-  BIG_BREAKPOINT,
-  MAX_WIDTH,
-  MOBILE_BREAKPOINT,
+    BIG_BREAKPOINT,
+    MAX_WIDTH,
+    MOBILE_BREAKPOINT,
 } from "../../constants/BreakPoints";
 import LessThanBlue from "../../assets/images/MoreThanBlueWhiteIcon.svg";
 import MoreThanBlue from "../../assets/images/LessThanBlueWhiteIcon.svg";
-import { useWindowSize } from "react-use";
+import {useWindowSize} from "react-use";
 import LocationIcon from "../../assets/images/LocationIcon.svg";
 import Logo from "../../assets/images/logo.svg";
-import { StyledLoadingImage } from "../../components/Loading/Loading";
+import {StyledLoadingImage} from "../../components/Loading/Loading";
 
 const StyledVenue = styled.div`
-   {
-    padding: 100px 10rem 50px;
+
+    padding: 0.5rem 2rem 0.5rem;
     text-align: left;
     max-width: ${MAX_WIDTH}px;
     margin: 0 auto;
 
     @media (max-width: ${BIG_BREAKPOINT}px) {
       padding: 100px 1rem 50px;
     }
-  }
+
 
   .image {
     img.venue {