src/components/Layout/Header/Description/Description.module.scss

@@ -0,0 +1,7 @@
+@import 'fontsize';
+@import 'spacing';
+
+.container {
+    font-size: $font-size-small;
+    margin: $spacing_8 0px $spacing_16;
+}

src/components/Layout/Header/Description/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import style from './Description.module.scss'
+
 import {useTranslations} from 'next-intl';
 
 const Description: React.FC = () => {
@@ -7,7 +9,7 @@ const Description: React.FC = () => {
   const t = useTranslations('Header');
 
   return (
-    <div>{t('description')}</div>
+    <div className={style.container}>{t('description')}</div>
   );
 };
 

src/components/Layout/Header/Disclaimer/Disclaimer.module.scss

@@ -1,10 +1,12 @@
 @import 'colors';
 @import 'spacing';
+@import 'fontsize';
 
 .messageBox {
     border: 1px solid $colors_yellow;
     text-align: center;
     padding: $spacing_8;
     border-radius: $spacing_4;
-    margin-bottom: $spacing_32;
+    margin-bottom: $spacing_16;
+    font-size: $font-size-medium;
 }

src/components/Layout/Header/Title/Title.module.scss

@@ -0,0 +1,5 @@
+@import 'spacing';
+
+.title {
+    margin-bottom: 0px;
+}

src/components/Layout/Header/Title/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import style from './Title.module.scss'
+
 import {useTranslations} from 'next-intl';
 import Link from 'next/link';
 
@@ -8,8 +10,7 @@ const Title: React.FC = () => {
   const t = useTranslations('Header');
 
   return (
-    <Link href={'/'}><h1>{t('title')}</h1></Link>
-    
+    <Link href={'/'}><h1 className={style.title}>{t('title')}</h1></Link>
   );
 };
 

src/components/Layout/Results/Wrapper/Gallery/Gallery.module.scss

@@ -25,7 +25,7 @@
 }
 
 .galleryContainer.show {
-    @media only screen and (max-width: $portrait) {
+    @media only screen and (max-width: $tablet) {
         grid-template-columns: repeat(1, 1fr);
     }
 }

src/components/Layout/Results/Wrapper/Toggle/Toggle.module.scss

@@ -1,6 +1,11 @@
 @import 'breakpoints';
 
 .toggleContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 16px;
+
     @media only screen and (min-width: $tablet) {
         display: none;
     }

src/styles/_font.scss

@@ -1,5 +1,5 @@
 @import "./breakpoints";
-@import "./spacing";
+@import "./fontsize";
 
 @font-face {
     font-family: 'Lemon Yellow Sun';
@@ -19,7 +19,11 @@ h5 {
 }
 
 h1 {
-    font-size: $spacing_48;
+    font-size: $font-size-xlarge;
+
+    @media only screen and (max-width: $tablet) {
+        font-size: $font-size-large;
+    }
 }
 
 span,

src/styles/_fontsize.scss

@@ -0,0 +1,4 @@
+$font-size-small: 10px;
+$font-size-medium: 16px;
+$font-size-large: 32px;
+$font-size-xlarge: 48px;