Use global typography styles on Poster page layout

src/components/layouts/PosterLayout.svelte

@@ -75,8 +75,8 @@
     <aside class="poster-layout__buy">
         <div class="poster-layout__info">
             <dl>
-                <dt>{capitalizeFirstLetter(product.type)}</dt>
+                <dt class="title-small">{capitalizeFirstLetter(product.type)}</dt>
-                <dd>{shopProduct.name} – {shopProduct.price}€</dd>
+                <dd class="text-info">{shopProduct.name} – {shopProduct.price}€</dd>
             </dl>
             <Button
                 tag="button"
@@ -114,10 +114,10 @@
     <div class="poster-layout__about grid">
         <div class="text container">
             {#if product.description}
-                <p>{product.description}</p>
+                <p class="headline text-large">{product.description}</p>
             {/if}
             {#if product.details}
-                <p class="details">{product.details}</p>
+                <p class="details text-xsmall">{product.details}</p>
             {/if}
         </div>
     </div>

src/style/_typography.scss

@@ -142,9 +142,16 @@
 
 // Large
 .text-large {
-    font-size: rem(32px);
+    font-size: rem(24px);
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.4;
+
+    @include bp (sm) {
+        font-size: rem(28px);
+    }
+    @include bp (sd) {
+        font-size: rem(32px);
+    }
 }
 
 // Medium

src/style/layouts/_poster.scss

@@ -73,20 +73,15 @@
         // Title
         dt {
             color: $color-secondary;
-            font-family: $font-serif;
+            line-height: 1.2;
-            font-size: rem(36px);
-            line-height: 1.3;
         }
         // Text
         dd {
             margin-top: 8px;
-            font-size: rem(14px);
-            line-height: 1.4;
             color: $color-gray;
 
             @include bp (sm) {
                 max-width: none;
-                font-size: rem(16px);
             }
         }
     }
@@ -177,7 +172,7 @@
         white-space: pre-line;
 
         @include bp (sm) {
-            padding: 144px 0 260px;
+            padding: clamp(88px, 20vw, 144px) 0 clamp(256px, 20vw, 320px);
             margin: -120px 0;
         }
 
@@ -186,25 +181,20 @@
             max-width: 768px;
             margin-left: 0;
             margin-right: 0;
-            font-size: clamp(#{rem(22px)}, 5vw, #{rem(28px)});
-            font-weight: 200;
 
             @include bp (sm) {
                 grid-column: 5 / span 12;
-                font-size: rem(32px);
             }
         }
-
+        .headline {
+            font-weight: 300;
+        }
         .details {
             color: $color-gray;
-            font-size: rem(16px);
             margin-top: 32px;
-            line-height: 1.5;
-            font-weight: 300;
 
             @include bp (sm) {
-                margin-top: 56px;
+                margin-top: 40px;
-                font-size: rem(18px);
             }
         }
     }