feat: use 2 pontus-x logo variants for different screen sizes

src/components/@shared/atoms/Logo/index.module.css

@@ -1,20 +1,20 @@
 .logo {
+  display: none;
+}
+.logoSmall {
+  display: block;
   width: var(--menu-logo-size-width-sm);
   height: var(--menu-logo-size-height-sm);
   margin: 0;
 }
 
-.logo path {
-  fill: var(--menu-logo-color);
-}
-
-a > .logo:hover path {
-  fill: var(--menu-logo-color-hover);
-}
-
 @media screen and (min-width: 55rem) {
   .logo {
+    display: block;
     width: var(--menu-logo-size-width-lg);
     height: var(--menu-logo-size-height-lg);
   }
+  .logoSmall {
+    display: none;
+  }
 }

src/components/@shared/atoms/Logo/index.tsx

@@ -1,7 +1,13 @@
 import { ReactElement } from 'react'
-import LogoAsset from '@images/gaia-x-logo.svg'
+import LogoAsset from '@images/pontusx_logo_horizontal.svg'
+import LogoAssetSmall from '@images/pontusx_logo.svg'
 import styles from './index.module.css'
 
 export default function Logo(): ReactElement {
-  return <LogoAsset className={styles.logo} />
+  return (
+    <div className={styles.logoWrapper}>
+      <LogoAsset className={styles.logo} />
+      <LogoAssetSmall className={styles.logoSmall} />
+    </div>
+  )
 }

src/stylesGlobal/_variables.css

@@ -27,9 +27,9 @@
   /* Menubar */
   --menu-logo-color: var(--brand-gaia-x-blue);
   --menu-logo-color-hover: var(--brand-gaia-x-blue);
-  --menu-logo-size-width-sm: 7.5rem;
+  --menu-logo-size-width-sm: 3.5rem;
   --menu-logo-size-height-sm: 3.5rem;
-  --menu-logo-size-width-lg: 7.5rem;
+  --menu-logo-size-width-lg: 15rem;
   --menu-logo-size-height-lg: 3.5rem;
   --menu-font-color: var(--color-primary);
   --menu-font-color-active: var(--font-color-heading);