first scroll effect with gsap scrollsmoother

.gitignore

@@ -9,6 +9,7 @@
 # Ignore sensitive information
 /web_main/sites/*/settings.php
 /web_main/sites/*/settings.local.php
+/web_main/sites/*/settings.dist.php
 /web_main/sites/*/services*.yml
 /web_main/sites/*/salt.txt
 /web_main/sites/development.services.yml

config/sync/block.block.mathallo_formulairederecherche.yml

@@ -0,0 +1,21 @@
+uuid: 555155e0-e81b-4efd-8ad3-2edce0f4eaa2
+langcode: fr
+status: true
+dependencies:
+  module:
+    - search
+  theme:
+    - mathallo
+id: mathallo_formulairederecherche
+theme: mathallo
+region: header_left
+weight: -1
+provider: null
+plugin: search_form_block
+settings:
+  id: search_form_block
+  label: 'Formulaire de recherche'
+  label_display: '0'
+  provider: search
+  page_id: node_search
+visibility: {  }

config/sync/block.block.mathallo_identitedusite.yml

@@ -0,0 +1,23 @@
+uuid: fe237667-cfc0-4c01-866d-e65e7742b644
+langcode: fr
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - mathallo
+id: mathallo_identitedusite
+theme: mathallo
+region: header_center
+weight: -1
+provider: null
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Identité du site'
+  label_display: '0'
+  provider: system
+  use_site_logo: false
+  use_site_name: true
+  use_site_slogan: false
+visibility: {  }

config/sync/block.block.mathallo_navigationprincipale.yml

@@ -0,0 +1,34 @@
+uuid: 7c3c7ef7-6b0a-4ae6-8bf1-339e26ce01dd
+langcode: fr
+status: true
+dependencies:
+  config:
+    - system.menu.main
+  module:
+    - menu_block
+  theme:
+    - mathallo
+id: mathallo_navigationprincipale
+theme: mathallo
+region: header_right
+weight: -1
+provider: null
+plugin: 'menu_block:main'
+settings:
+  id: 'menu_block:main'
+  label: 'Navigation principale'
+  label_display: '0'
+  provider: menu_block
+  follow: false
+  follow_parent: child
+  display_empty: false
+  label_link: false
+  label_type: block
+  level: 1
+  depth: 0
+  expand_all_items: false
+  parent: 'main:'
+  render_parent: false
+  suggestion: main
+  hide_on_nonactive: false
+visibility: {  }

config/sync/block.block.mathallo_navigationprincipale_2.yml

@@ -0,0 +1,34 @@
+uuid: fa6406a2-d0b2-4f16-90d8-7bfdb4199ab4
+langcode: fr
+status: true
+dependencies:
+  config:
+    - system.menu.main
+  module:
+    - menu_block
+  theme:
+    - mathallo
+id: mathallo_navigationprincipale_2
+theme: mathallo
+region: footer
+weight: 0
+provider: null
+plugin: 'menu_block:main'
+settings:
+  id: 'menu_block:main'
+  label: 'Navigation principale'
+  label_display: '0'
+  provider: menu_block
+  follow: false
+  follow_parent: child
+  display_empty: false
+  label_link: false
+  label_type: block
+  level: 1
+  depth: 0
+  expand_all_items: false
+  parent: 'main:'
+  render_parent: false
+  suggestion: main
+  hide_on_nonactive: false
+visibility: {  }

config/sync/core.extension.yml

@@ -74,6 +74,7 @@ module:
   persistent_login: 0
   redis: 0
   responsive_image: 0
+  search: 0
   search_api: 0
   search_api_db: 0
   smart_trim: 0
@@ -100,4 +101,6 @@ module:
 theme:
   seven: 0
   adminimal_theme: 0
+  stark: 0
+  mathallo: 0
 profile: figli_starter_kit

config/sync/pathauto.pattern.static.yml

@@ -0,0 +1,22 @@
+uuid: 7edda77d-9bf9-4311-8e98-3ffcf44d7017
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: static
+label: static
+type: 'canonical_entities:node'
+pattern: '/[node:title]'
+selection_criteria:
+  b031d977-2792-49d3-b66a-7b869c59b51c:
+    id: 'entity_bundle:node'
+    negate: false
+    uuid: b031d977-2792-49d3-b66a-7b869c59b51c
+    context_mapping:
+      node: node
+    bundles:
+      static: static
+selection_logic: and
+weight: -5
+relationships: {  }

config/sync/search.page.help_search.yml

@@ -0,0 +1,14 @@
+uuid: 676bfdd2-7ad8-47f6-a482-7f4936f4e1b5
+langcode: fr
+status: true
+dependencies:
+  module:
+    - help
+_core:
+  default_config_hash: RZ-bcSekNSsAbIPLW7Gmyd3uUjIOSrPvnb8RCCZYJm8
+id: help_search
+label: Aide
+path: help
+weight: 0
+plugin: help_search
+configuration: {  }

config/sync/search.page.node_search.yml

@@ -0,0 +1,15 @@
+uuid: d24f3825-3fd3-4017-aa34-2c1d4ac65b47
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+_core:
+  default_config_hash: 97tvtzGOa8_flb22CzSjgtm_YkiGMHvEBO-6q2K9V_U
+id: node_search
+label: Contenu
+path: node
+weight: -10
+plugin: node_search
+configuration:
+  rankings: {  }

config/sync/search.page.user_search.yml

@@ -0,0 +1,14 @@
+uuid: e77baf8b-1675-4dcc-9b80-3bde5658917b
+langcode: fr
+status: true
+dependencies:
+  module:
+    - user
+_core:
+  default_config_hash: k3aUaZXGDuhkek2TZIee0PApOPTvYZLadziekdyHA5A
+id: user_search
+label: Utilisateurs
+path: user
+weight: 0
+plugin: user_search
+configuration: {  }

config/sync/search.settings.yml

@@ -0,0 +1,22 @@
+_core:
+  default_config_hash: hvVxL1G-ZCxaq32IZws0YsfuhvaDiQE_np-0g35KjUk
+and_or_limit: 7
+default_page: node_search
+index:
+  cron_limit: 100
+  overlap_cjk: true
+  minimum_word_size: 3
+  tag_weights:
+    h1: 25
+    h2: 18
+    h3: 15
+    h4: 14
+    h5: 9
+    h6: 6
+    u: 3
+    b: 3
+    i: 3
+    strong: 3
+    em: 3
+    a: 10
+logging: false

config/sync/search_api.index.contents.yml

@@ -0,0 +1,37 @@
+uuid: 41dd5bd9-1f15-4977-b77e-40d20befda4d
+langcode: fr
+status: true
+dependencies:
+  config:
+    - search_api.server.db
+  module:
+    - node
+id: contents
+name: contents
+description: ''
+read_only: false
+field_settings: {  }
+datasource_settings:
+  'entity:node':
+    bundles:
+      default: true
+      selected: {  }
+    languages:
+      default: true
+      selected: {  }
+processor_settings:
+  add_url: {  }
+  aggregated_field: {  }
+  custom_value: {  }
+  entity_type: {  }
+  language_with_fallback: {  }
+  rendered_item: {  }
+tracker_settings:
+  default:
+    indexing_order: fifo
+options:
+  cron_limit: 50
+  delete_on_fail: true
+  index_directly: true
+  track_changes_in_references: true
+server: db

config/sync/search_api.server.db.yml

@@ -0,0 +1,15 @@
+uuid: 0bd3e228-d299-4f90-9dfe-cb81622a784f
+langcode: fr
+status: true
+dependencies:
+  module:
+    - search_api_db
+id: db
+name: db
+description: ''
+backend: search_api_db
+backend_config:
+  database: 'default:default'
+  min_chars: 2
+  matching: partial
+  phrase: bigram

config/sync/system.site.yml

@@ -8,7 +8,7 @@ slogan: ''
 page:
   403: ''
   404: ''
-  front: /user/login
+  front: /node/1
 admin_compact_mode: false
 weight_select_max: 100
 default_langcode: fr

config/sync/system.theme.yml

@@ -1,4 +1,5 @@
 _core:
   default_config_hash: TpdA4rsOBAawnqeon9A-Ooht_4VO3hHKib79xyHcTyg
-admin: adminimal_theme
 langcode: fr
+admin: adminimal_theme
+default: mathallo

config/sync/user.role.anonymous.yml

@@ -4,6 +4,7 @@ status: true
 dependencies:
   module:
     - devel
+    - search
     - system
 _core:
   default_config_hash: jyuRv_5UazPqBsQ9L4kDkcVvxtGr0WytAUoWf1LhqOk
@@ -14,3 +15,4 @@ is_admin: false
 permissions:
   - 'access content'
   - 'access devel information'
+  - 'search content'

config/sync/user.role.authenticated.yml

@@ -4,6 +4,7 @@ status: true
 dependencies:
   module:
     - devel
+    - search
     - system
 _core:
   default_config_hash: OVp5431n1LmiRh_QaOpDS1hEEFvtjRqisASIU0tYIwo
@@ -14,3 +15,4 @@ is_admin: false
 permissions:
   - 'access content'
   - 'access devel information'
+  - 'search content'

web_main/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/demo.html

@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            padding: 9px;
+            margin: 0 0 12px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: 900; font-style: italic;">Schibsted Grotesk Black Italic</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: 900;
+    font-style: italic;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-BlackItalic.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: 900; font-style: italic;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: normal;">Schibsted Grotesk Bold</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-Bold.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: normal;">Schibsted Grotesk ExtraBold</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-ExtraBold.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: italic;">Schibsted Grotesk Bold Italic</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: bold;
+    font-style: italic;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-BoldItalic.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: italic;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: 900; font-style: normal;">Schibsted Grotesk Black</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: 900;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-Black.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: 900; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: italic;">Schibsted Grotesk ExtraBold Italic</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: bold;
+    font-style: italic;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-ExtraBoldItalic.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: bold; font-style: italic;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: 600; font-style: italic;">Schibsted Grotesk SemiBold Italic</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: 600;
+    font-style: italic;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-SemiBoldItalic.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: 600; font-style: italic;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: normal; font-style: italic;">Schibsted Grotesk Italic</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: normal;
+    font-style: italic;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-Italic.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: normal; font-style: italic;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: 500; font-style: italic;">Schibsted Grotesk Medium Italic</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: 500;
+    font-style: italic;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-MediumItalic.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: 500; font-style: italic;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: 500; font-style: normal;">Schibsted Grotesk Medium</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: 500;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-Medium.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: 500; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: 600; font-style: normal;">Schibsted Grotesk SemiBold</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: 600;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-SemiBold.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: 600; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Schibsted Grotesk'; font-weight: normal; font-style: normal;">Schibsted Grotesk Regular</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Schibsted Grotesk';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;SchibstedGrotesk-Regular.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Schibsted Grotesk'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>

web_main/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/stylesheet.css

@@ -0,0 +1,156 @@
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BlackItalic.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BlackItalic.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BlackItalic.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BlackItalic.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BlackItalic.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BlackItalic.svg#SchibstedGrotesk-BlackItalic') format('svg');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Bold.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Bold.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Bold.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Bold.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Bold.svg#SchibstedGrotesk-Bold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBold.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBold.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBold.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBold.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBold.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBold.svg#SchibstedGrotesk-ExtraBold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BoldItalic.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BoldItalic.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BoldItalic.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BoldItalic.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-BoldItalic.svg#SchibstedGrotesk-BoldItalic') format('svg');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Black.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Black.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Black.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Black.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Black.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Black.svg#SchibstedGrotesk-Black') format('svg');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBoldItalic.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBoldItalic.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBoldItalic.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBoldItalic.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-ExtraBoldItalic.svg#SchibstedGrotesk-ExtraBoldItalic') format('svg');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBoldItalic.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBoldItalic.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBoldItalic.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBoldItalic.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBoldItalic.svg#SchibstedGrotesk-SemiBoldItalic') format('svg');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Italic.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Italic.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Italic.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Italic.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Italic.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Italic.svg#SchibstedGrotesk-Italic') format('svg');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-MediumItalic.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-MediumItalic.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-MediumItalic.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-MediumItalic.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-MediumItalic.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-MediumItalic.svg#SchibstedGrotesk-MediumItalic') format('svg');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Medium.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Medium.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Medium.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Medium.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Medium.svg#SchibstedGrotesk-Medium') format('svg');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBold.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBold.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBold.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBold.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBold.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-SemiBold.svg#SchibstedGrotesk-SemiBold') format('svg');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Schibsted Grotesk';
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Regular.eot');
+    src: url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Regular.woff2') format('woff2'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Regular.woff') format('woff'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Regular.ttf') format('truetype'),
+        url('/themes/custom/mathallo/assets/fonts/Schibsted_Grotesk/SchibstedGrotesk-Regular.svg#SchibstedGrotesk-Regular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+