diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
new file mode 100644
index 00000000..3f32a8d9
--- /dev/null
+++ b/__mocks__/styleMock.js
@@ -0,0 +1,12 @@
+module.exports = new Proxy(
+    {},
+    {
+        get: function getter(target, key) {
+            if (key === '__esModule') {
+                // True instead of false to pretend we're an ES module.
+                return true;
+            }
+            return key;
+        },
+    }
+);
diff --git a/jest.config.js b/jest.config.js
index 23eba575..14b0ca71 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -8,7 +8,8 @@ const customJestConfig = {
     coverageReporters: ['lcov', 'text'],
     testPathIgnorePatterns: ['/cypress/', '__tests__/mockdata/'],
     moduleNameMapper: {
-        '\\.(css|less|scss|sss|styl)$': 'identity-obj-proxy',
+        '^.+\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
+        '\\.(css|less|scss|sss|styl)$': '<rootDir>/__mocks__/styleMock.js',
     },
     setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
     testEnvironment: 'jest-environment-jsdom',
@@ -23,19 +24,4 @@ const customJestConfig = {
     },
 };
 
-/**
- * We handle SVG in our own way instead of letting Next.js use next/image.
- * @param {} config
- * @returns
- */
-const fdmgJestConfig = async (config) => {
-    const nextConfig = { ...config };
-    nextConfig.moduleNameMapper = {
-        '^.+\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
-        ...nextConfig.moduleNameMapper,
-    };
-    return nextConfig;
-};
-
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = fdmgJestConfig(customJestConfig);
+module.exports = customJestConfig;
diff --git a/package-lock.json b/package-lock.json
index 8cb6448c..42131e8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,6 @@
                 "eslint-plugin-next": "^0.0.0",
                 "eslint-plugin-prettier": "^5.1.3",
                 "fetch-jsonp": "^1.3.0",
-                "identity-obj-proxy": "^3.0.0",
                 "jest": "^29.7.0",
                 "jest-environment-jsdom": "^29.7.0",
                 "json-to-scss": "^1.6.2",
@@ -6928,12 +6927,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/harmony-reflect": {
-            "version": "1.6.2",
-            "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
-            "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
-            "dev": true
-        },
         "node_modules/has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7093,18 +7086,6 @@
                 "postcss": "^8.1.0"
             }
         },
-        "node_modules/identity-obj-proxy": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
-            "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
-            "dev": true,
-            "dependencies": {
-                "harmony-reflect": "^1.4.6"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/ignore": {
             "version": "5.2.4",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
diff --git a/package.json b/package.json
index 22a09010..f9c6e7cc 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,6 @@
         "eslint-plugin-next": "^0.0.0",
         "eslint-plugin-prettier": "^5.1.3",
         "fetch-jsonp": "^1.3.0",
-        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "json-to-scss": "^1.6.2",
diff --git a/pages/[section]/[id]/[title].tsx b/pages/[section]/[id]/[title].tsx
index 9a127904..1beeaec8 100644
--- a/pages/[section]/[id]/[title].tsx
+++ b/pages/[section]/[id]/[title].tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import '@fdmg/css-grid/css/grid.css';
 import '@fdmg/css-grid/css/flex.css';
-import styles from './Article.module.scss';
+import * as styles from './Article.module.scss';
 import { mergeInlineContent } from '../../../src/utils/articleContent';
 import PageStore from '../../../src/stores/PageStore';
 import { OEmbedLoader } from '../../../src/utils/OEmbedLoader';
@@ -52,7 +52,7 @@ function Article(props: Props) {
 
     try {
         return (
-            <article className={styles.article}>
+            <article className={styles['article']}>
                 <Head>
                     <meta name="robots" content="noindex" />
                 </Head>
@@ -79,7 +79,7 @@ function Article(props: Props) {
                         ]}
                     >
                         <GridContainer
-                            className={styles.content}
+                            className={styles['content']}
                             attributes={['grid']}
                         >
                             <GridContainer attributes={['xs-12', 'gap-bottom']}>
@@ -92,7 +92,7 @@ function Article(props: Props) {
                                     />
 
                                     <h1>{props.json.title}</h1>
-                                    <p className={styles.intro}>
+                                    <p className={styles['intro']}>
                                         {props.json.intro}
                                     </p>
                                 </header>
@@ -110,12 +110,12 @@ function Article(props: Props) {
                     />
 
                     <GridContainer
-                        className={styles.fullHeight}
+                        className={styles['fullHeight']}
                         attributes={['m-1', 'hide-lt-m', 'gap-1', 'gap-2']}
                     >
                         <VerticalToolbar
                             id="12345"
-                            className={`${styles.left} ${styles.sticky}`}
+                            className={`${styles['left']} ${styles['sticky']}`}
                             bookmarked={false}
                             onClick={console.log}
                         />
@@ -131,7 +131,7 @@ function Article(props: Props) {
                         ]}
                     >
                         <GridContainer
-                            className={styles.content}
+                            className={styles['content']}
                             attributes={['grid']}
                         >
                             <GridContainer attributes={['xs-12', 'gap-bottom']}>
@@ -140,10 +140,12 @@ function Article(props: Props) {
                         </GridContainer>
                     </GridContainer>
                     <GridContainer
-                        className={styles.fullHeight}
+                        className={styles['fullHeight']}
                         attributes={['l-4', 'hide-lt-l', 'gap-2']}
                     >
-                        <span className={`${styles.right} ${styles.sticky}`}>
+                        <span
+                            className={`${styles['right']} ${styles['sticky']}`}
+                        >
                             AD
                         </span>
                     </GridContainer>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 220ec7d7..7800bb8d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,7 +7,7 @@ import '../src/design-tokens/design-tokens.scss';
 import './_app.scss';
 import './_app_markdown.scss';
 import './_app_a11y-dark.scss';
-import styles from './_app.module.scss';
+import * as styles from './_app.module.scss';
 import PageStore, { Page } from '../src/stores/PageStore';
 import Head from 'next/head';
 import { Tooltip } from '../src/components/Tooltip';
@@ -66,7 +66,7 @@ function App({ Component, pageProps }) {
     const [loggedIn, setLoggedIn] = useState(false);
 
     const [pageType, setPageType] = useState<Page>(PageStore.getPageType());
-    const [pageStyle, setPageStyle] = useState(styles.overview);
+    const [pageStyle, setPageStyle] = useState(styles['overview']);
     const darkModeMediaQuery =
         typeof window !== 'undefined'
             ? window?.matchMedia('(prefers-color-scheme: dark)')
@@ -103,11 +103,11 @@ function App({ Component, pageProps }) {
     useEffect(() => {
         switch (pageType) {
             case 'article':
-                setPageStyle(styles.article);
+                setPageStyle(styles['article']);
                 break;
             case 'overview':
             default:
-                setPageStyle(styles.overview);
+                setPageStyle(styles['overview']);
         }
     }, [pageType]);
 
diff --git a/pages/ab.tsx b/pages/ab.tsx
index d0c9542d..60c7947c 100644
--- a/pages/ab.tsx
+++ b/pages/ab.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ABProvider, Experiment, Variant } from '../src/components/ab/ab';
 import { parseCookies } from 'nookies';
-import styles from './ab.module.scss';
+import * as styles from './ab.module.scss';
 import { GetServerSidePropsContext } from 'next';
 import Head from 'next/head';
 
@@ -22,7 +22,7 @@ function Demo(props: Props) {
     }
 
     return (
-        <div className={styles.ab}>
+        <div className={styles['ab']}>
             <Head>
                 <title>
                     {`${metaTitle} - Design System - Het Financieele Dagblad`}
diff --git a/pages/article-bullet-point.tsx b/pages/article-bullet-point.tsx
index ab9b48f4..03a6999d 100644
--- a/pages/article-bullet-point.tsx
+++ b/pages/article-bullet-point.tsx
@@ -5,7 +5,7 @@ import {
     getCssClassNames,
 } from '../src/components/bullet-point/BulletPoint';
 import PageStore from '../src/stores/PageStore';
-import styles from './article-bullet-point.module.scss';
+import * as styles from './article-bullet-point.module.scss';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
@@ -52,7 +52,7 @@ function Page() {
             <Explain
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Bullet point"
                 reactComponentName="BulletPoint"
                 description={
@@ -68,7 +68,7 @@ function Page() {
             <Explain
                 anchor="align-right"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Bullet point (align: right)"
                 reactComponentName="BulletPoint"
                 description={
@@ -84,7 +84,7 @@ function Page() {
             <Explain
                 anchor="variant-1"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Summary (variant-1)"
                 reactComponentName="BulletPoint"
                 description={
@@ -100,7 +100,7 @@ function Page() {
             <Explain
                 anchor="variant-1-align-right"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Bullet point (variant-1, align: right)"
                 reactComponentName="BulletPoint"
                 description={
diff --git a/pages/article-link-block.tsx b/pages/article-link-block.tsx
index 71cbf643..36d9c843 100644
--- a/pages/article-link-block.tsx
+++ b/pages/article-link-block.tsx
@@ -5,7 +5,7 @@ import {
     getCssClassNames,
 } from '../src/components/article-link-block/LinkBlock';
 import PageStore from '../src/stores/PageStore';
-import styles from './article-link-block.module.scss';
+import * as styles from './article-link-block.module.scss';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
@@ -44,7 +44,7 @@ function Page() {
             <Explain
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Link Block"
                 reactComponentName="LinkBlock"
                 description={
@@ -64,7 +64,7 @@ function Page() {
             <Explain
                 anchor="align-right"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Link Block (align: right)"
                 reactComponentName="LinkBlock"
                 description={
diff --git a/pages/article-tags.tsx b/pages/article-tags.tsx
index a0a0740f..61c77f8e 100644
--- a/pages/article-tags.tsx
+++ b/pages/article-tags.tsx
@@ -4,7 +4,7 @@ import {
     ArticleTags,
     getCssClassNames,
 } from '../src/components/article-tags/ArticleTags';
-import styles from './article-link-block.module.scss';
+import * as styles from './article-link-block.module.scss';
 import PageStore from '../src/stores/PageStore';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
@@ -112,7 +112,7 @@ function Page() {
 
             <Explain
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Article tags"
                 description={
                     <>
diff --git a/pages/author-info.tsx b/pages/author-info.tsx
index 8d803f1e..26f69af9 100644
--- a/pages/author-info.tsx
+++ b/pages/author-info.tsx
@@ -4,7 +4,7 @@ import {
     AuthorInfo,
     getCssClassNames,
 } from '../src/components/author-info/AuthorInfo';
-import styles from './article-link-block.module.scss';
+import * as styles from './article-link-block.module.scss';
 import Head from 'next/head';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
@@ -36,7 +36,7 @@ function Page() {
 
             <Explain
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
-                previewClassName={styles.preview}
+                previewClassName={styles['preview']}
                 legend="Author Info"
                 reactComponentName="AuthorInfo"
                 description={
diff --git a/pages/button/button.tsx b/pages/button/button.tsx
index 425dbb9b..ce9152d1 100644
--- a/pages/button/button.tsx
+++ b/pages/button/button.tsx
@@ -3,7 +3,7 @@ import { Explain } from '../../src/components/Explain';
 import { Button, getCssClassNames } from '../../src/components/button/Button';
 import Head from 'next/head';
 import { EnvelopeIcon } from '../../src/design-tokens/icons';
-import styles from './buttons.module.scss';
+import * as styles from './buttons.module.scss';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
 
 export const metaTitle = 'Neutral Button';
@@ -28,7 +28,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button Neutral (default)"
@@ -65,7 +65,7 @@ function Page() {
             </Explain>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="m"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button Neutral (M)"
diff --git a/pages/button/cta.tsx b/pages/button/cta.tsx
index 28d3e6a5..0f2d6daa 100644
--- a/pages/button/cta.tsx
+++ b/pages/button/cta.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../src/components/button/ButtonCta';
 import Head from 'next/head';
 import { EnvelopeIcon } from '../../src/design-tokens/icons';
-import styles from './buttons.module.scss';
+import * as styles from './buttons.module.scss';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
 
 export const metaTitle = 'Button call-to-action';
@@ -31,7 +31,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button CTA (default)"
@@ -89,7 +89,7 @@ function Page() {
             </Explain>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="m"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Button CTA (M)"
diff --git a/pages/button/ghost.tsx b/pages/button/ghost.tsx
index a9a60781..b94f178e 100644
--- a/pages/button/ghost.tsx
+++ b/pages/button/ghost.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../src/components/button/ButtonGhost';
 import Head from 'next/head';
 import { EnvelopeIcon } from '../../src/design-tokens/icons';
-import styles from './buttons.module.scss';
+import * as styles from './buttons.module.scss';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
 
 export const metaTitle = 'Ghost Button';
@@ -31,7 +31,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="default"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Ghost Button (default)"
@@ -85,7 +85,7 @@ function Page() {
             </Explain>
 
             <Explain
-                previewClassName={styles.buttons}
+                previewClassName={styles['buttons']}
                 anchor="m"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Ghost Button (M)"
diff --git a/pages/card/horizontal-1.tsx b/pages/card/horizontal-1.tsx
index 2c6d399a..6fb2aafa 100644
--- a/pages/card/horizontal-1.tsx
+++ b/pages/card/horizontal-1.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../src/components/card/HorizontalCard1';
 import Head from 'next/head';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 import { FdImgix } from '../../src/components/utils/image/FdImgix';
 
 const horizontalCards1: any = [
@@ -90,7 +90,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={`${styles.horizontalGrid} grid`}
+                previewClassName={`${styles['horizontalGrid']} grid`}
                 anchor="horizontal1"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Horizontal Card 1"
diff --git a/pages/card/horizontal-2.tsx b/pages/card/horizontal-2.tsx
index ca5d66a9..714be062 100644
--- a/pages/card/horizontal-2.tsx
+++ b/pages/card/horizontal-2.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../src/components/card/HorizontalCard2';
 import Head from 'next/head';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 
 const horizontalCards2: any = [
     {
@@ -60,7 +60,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={`${styles.horizontalGrid} grid`}
+                previewClassName={`${styles['horizontalGrid']} grid`}
                 anchor="horizontal2"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Horizontal Card 2"
diff --git a/pages/card/horizontal-3.tsx b/pages/card/horizontal-3.tsx
index d3616a36..84a50aad 100644
--- a/pages/card/horizontal-3.tsx
+++ b/pages/card/horizontal-3.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../src/components/card/HorizontalCard3';
 import Head from 'next/head';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 import { FdImgix } from '../../src/components/utils/image/FdImgix';
 
 const horizontalCards3: any = [
@@ -60,7 +60,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={`${styles.horizontalGrid} grid`}
+                previewClassName={`${styles['horizontalGrid']} grid`}
                 anchor="horizontal3"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Horizontal Card 3"
diff --git a/pages/card/horizontal-4.tsx b/pages/card/horizontal-4.tsx
index 344fc02f..0e2694d9 100644
--- a/pages/card/horizontal-4.tsx
+++ b/pages/card/horizontal-4.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Explain } from '../../src/components/Explain';
 import Head from 'next/head';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 import {
     HorizontalCard4,
     getCssClassNames,
@@ -64,7 +64,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={`${styles.horizontalGrid} ${styles.autoMinHeight} grid`}
+                previewClassName={`${styles['horizontalGrid']} ${styles['autoMinHeight']} grid`}
                 anchor="horizontal4"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Horizontal Card 4"
diff --git a/pages/card/hybrid-1.tsx b/pages/card/hybrid-1.tsx
index cf7753ba..49bd4eb8 100644
--- a/pages/card/hybrid-1.tsx
+++ b/pages/card/hybrid-1.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 import { Explain } from '../../src/components/Explain';
 import {
     HybridCard1,
@@ -78,7 +78,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={`${styles.hybrid1Grid} grid`}
+                previewClassName={`${styles['hybrid1Grid']} grid`}
                 anchor="hybrid1"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Hybrid Card 1"
diff --git a/pages/card/hybrid-2.tsx b/pages/card/hybrid-2.tsx
index 05ba4d1d..29021860 100644
--- a/pages/card/hybrid-2.tsx
+++ b/pages/card/hybrid-2.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 import { Explain } from '../../src/components/Explain';
 import {
     HybridCard2,
@@ -78,7 +78,7 @@ function Page() {
             </Head>
 
             <Explain
-                previewClassName={`${styles.hybrid2Grid} grid`}
+                previewClassName={`${styles['hybrid2Grid']} grid`}
                 anchor="hybrid2"
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Hybrid Card 2"
diff --git a/pages/card/hybrid-4.tsx b/pages/card/hybrid-4.tsx
index f3278a9a..cd890633 100644
--- a/pages/card/hybrid-4.tsx
+++ b/pages/card/hybrid-4.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Explain } from '../../src/components/Explain';
 import Head from 'next/head';
 import { globalCssClassNames } from '../../src/utils/globalCssClassNames';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 import {
     HybridCard4,
     getCssClassNames,
@@ -61,7 +61,7 @@ function Page() {
 
             <Explain
                 anchor="hybrid4"
-                previewClassName={`${styles.autoMinHeight} grid`}
+                previewClassName={`${styles['autoMinHeight']} grid`}
                 cssClassNames={[...getCssClassNames(), ...globalCssClassNames]}
                 legend="Hybrid Card 4"
                 reactComponentName="HybridCard4"
diff --git a/pages/cards.tsx b/pages/cards.tsx
index efc59a4e..8317252e 100644
--- a/pages/cards.tsx
+++ b/pages/cards.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './cards.module.scss';
+import * as styles from './cards.module.scss';
 import Link from 'next/link';
 import Head from 'next/head';
 
@@ -23,7 +23,7 @@ function Page() {
                 />
             </Head>
             <h1>Table of Contents</h1>
-            <table className={styles.table}>
+            <table className={styles['table']}>
                 <thead>
                     <tr>
                         <td>Card</td>
diff --git a/pages/cookieconsent.tsx b/pages/cookieconsent.tsx
index 1fc09c6f..6822df6f 100644
--- a/pages/cookieconsent.tsx
+++ b/pages/cookieconsent.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import Script from 'next/script';
-import styles from './cookieconsent.module.scss';
+import * as styles from './cookieconsent.module.scss';
 import { Explain } from '../src/components/Explain';
 import Head from 'next/head';
 import { Switch } from '../src/components/input/Switch';
@@ -67,7 +67,7 @@ function Page() {
     }, []);
 
     return (
-        <div className={styles.cookieConsent}>
+        <div className={styles['cookieConsent']}>
             <Head>
                 <title>
                     {`${metaTitle} - Design System - Het Financieele Dagblad`}
@@ -485,8 +485,8 @@ async function checkCookieconsent() {
                         </>
                     }
                     title={
-                        <header className={styles.header}>
-                            <span className={styles.icon}>
+                        <header className={styles['header']}>
+                            <span className={styles['icon']}>
                                 <FdmgIcon />
                             </span>
                         </header>
diff --git a/pages/fd-web/index.tsx b/pages/fd-web/index.tsx
index 76e1d407..18151d46 100644
--- a/pages/fd-web/index.tsx
+++ b/pages/fd-web/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './index.module.scss';
+import * as styles from './index.module.scss';
 import '@fdmg/css-grid/css/grid.css';
 import '@fdmg/css-grid/css/flex.css';
 import { VerticalCard1 } from '../../src/components/card/VerticalCard1';
@@ -21,7 +21,7 @@ function Page(props: Props) {
 
     try {
         return (
-            <section className={styles.page}>
+            <section className={styles['page']}>
                 <Head>
                     <meta name="robots" content="noindex" />
                 </Head>
@@ -35,12 +35,12 @@ function Page(props: Props) {
                         <GridContainer attributes={['xs-12', 'grid']}>
                             {singleOpeningTeaser && (
                                 <GridContainer
-                                    className={`ie-full-height ${styles.ie11FullHeight}`}
+                                    className={`ie-full-height ${styles['ie11FullHeight']}`}
                                     attributes={['xs-12', 'gap-bottom']}
                                 >
                                     <VerticalCard1
                                         id={singleOpeningTeaser.id}
-                                        className={`${styles.newsContainer} ${styles.fullHeight}`}
+                                        className={`${styles['newsContainer']} ${styles['fullHeight']}`}
                                         caption={singleOpeningTeaser?.title}
                                         intro={singleOpeningTeaser?.intro}
                                         label={
@@ -60,7 +60,7 @@ function Page(props: Props) {
                                 (teaser) => (
                                     <GridContainer
                                         key={`primary-${teaser.id}`}
-                                        className={`ie-full-height ${styles.ie11FullHeight}`}
+                                        className={`ie-full-height ${styles['ie11FullHeight']}`}
                                         attributes={[
                                             'xs-12',
                                             's-6',
@@ -72,7 +72,7 @@ function Page(props: Props) {
                                     >
                                         <VerticalCard1
                                             id={teaser.id}
-                                            className={`${styles.newsContainer} ${styles.fullHeight}`}
+                                            className={`${styles['newsContainer']} ${styles['fullHeight']}`}
                                             caption={teaser?.title}
                                             intro={teaser?.intro}
                                             label={
@@ -92,7 +92,7 @@ function Page(props: Props) {
                                 (teaser) => (
                                     <GridContainer
                                         key={`primary-${teaser.id}`}
-                                        className={`ie-full-height ${styles.ie11FullHeight}`}
+                                        className={`ie-full-height ${styles['ie11FullHeight']}`}
                                         attributes={[
                                             'xs-12',
                                             's-6',
@@ -104,7 +104,7 @@ function Page(props: Props) {
                                     >
                                         <VerticalCard1
                                             id={teaser.id}
-                                            className={`${styles.newsContainer} ${styles.fullHeight}`}
+                                            className={`${styles['newsContainer']} ${styles['fullHeight']}`}
                                             caption={teaser?.title}
                                             intro={teaser?.intro}
                                             label={
@@ -124,7 +124,7 @@ function Page(props: Props) {
                                 (teaser) => (
                                     <GridContainer
                                         key={`primary-${teaser.id}`}
-                                        className={`ie-full-height ${styles.ie11FullHeight}`}
+                                        className={`ie-full-height ${styles['ie11FullHeight']}`}
                                         attributes={[
                                             'xs-12',
                                             's-6',
@@ -136,7 +136,7 @@ function Page(props: Props) {
                                     >
                                         <VerticalCard1
                                             id={teaser.id}
-                                            className={`${styles.newsContainer} ${styles.fullHeight}`}
+                                            className={`${styles['newsContainer']} ${styles['fullHeight']}`}
                                             caption={teaser?.title}
                                             intro={teaser?.intro}
                                             label={
@@ -156,7 +156,7 @@ function Page(props: Props) {
                                 (teaser) => (
                                     <GridContainer
                                         key={`primary-${teaser.id}`}
-                                        className={`ie-full-height ${styles.ie11FullHeight}`}
+                                        className={`ie-full-height ${styles['ie11FullHeight']}`}
                                         attributes={[
                                             'xs-12',
                                             's-6',
@@ -168,7 +168,7 @@ function Page(props: Props) {
                                     >
                                         <VerticalCard1
                                             id={teaser.id}
-                                            className={`${styles.newsContainer} ${styles.fullHeight}`}
+                                            className={`${styles['newsContainer']} ${styles['fullHeight']}`}
                                             caption={teaser?.title}
                                             intro={teaser?.intro}
                                             label={
@@ -187,13 +187,13 @@ function Page(props: Props) {
                         </GridContainer>
                     </GridContainer>
                     <GridContainer
-                        className={`${styles.fullHeight}`}
+                        className={`${styles['fullHeight']}`}
                         attributes={['xs-12', 'l-3', 'gap-1', 'gap-bottom']}
                     >
                         <div className={`dummy-card full-width`}>
                             latest news
                         </div>
-                        <span className={`${styles.sticky} hide-lt-xl`}>
+                        <span className={`${styles['sticky']} hide-lt-xl`}>
                             AD
                         </span>
                     </GridContainer>
@@ -237,7 +237,7 @@ function Page(props: Props) {
                                                         return (
                                                             <GridContainer
                                                                 key={`${sectionModel.defaultCategoryModel.title}-${card.id}`}
-                                                                className={`ie-full-height ${styles.ie11FullHeight}`}
+                                                                className={`ie-full-height ${styles['ie11FullHeight']}`}
                                                                 attributes={[
                                                                     'xs-12',
                                                                     's-6',
@@ -249,7 +249,7 @@ function Page(props: Props) {
                                                             >
                                                                 <HybridCard1
                                                                     id={card.id}
-                                                                    className={`${styles.newsContainer} ${styles.fullHeight}`}
+                                                                    className={`${styles['newsContainer']} ${styles['fullHeight']}`}
                                                                     caption={
                                                                         card?.title
                                                                     }
@@ -270,7 +270,7 @@ function Page(props: Props) {
                                                         return (
                                                             <GridContainer
                                                                 key={`${sectionModel.defaultCategoryModel.title}-${card.id}`}
-                                                                className={`ie-full-height ${styles.ie11FullHeight}`}
+                                                                className={`ie-full-height ${styles['ie11FullHeight']}`}
                                                                 attributes={[
                                                                     'xs-12',
                                                                     's-6',
@@ -282,7 +282,7 @@ function Page(props: Props) {
                                                             >
                                                                 <HybridCard2
                                                                     id={card.id}
-                                                                    className={`${styles.newsContainer} ${styles.fullHeight}`}
+                                                                    className={`${styles['newsContainer']} ${styles['fullHeight']}`}
                                                                     caption={
                                                                         card?.title
                                                                     }
diff --git a/pages/grid.tsx b/pages/grid.tsx
index 935577d0..aad74d85 100644
--- a/pages/grid.tsx
+++ b/pages/grid.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Explain } from '../src/components/Explain';
 import Head from 'next/head';
-import styles from './grid.module.scss';
+import * as styles from './grid.module.scss';
 import { GridContainer } from '@fdmg/css-grid/GridContainer';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
@@ -38,7 +38,7 @@ function Page() {
             >
                 <GridContainer attributes={['grid']}>
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-12',
@@ -50,7 +50,7 @@ function Page() {
                     />
 
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-6',
@@ -62,7 +62,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-6',
@@ -75,7 +75,7 @@ function Page() {
                     />
 
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -89,7 +89,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -103,7 +103,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -117,7 +117,7 @@ function Page() {
                     />
 
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -130,7 +130,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -143,7 +143,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -156,7 +156,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -170,7 +170,7 @@ function Page() {
                     />
 
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             'xs-hide',
@@ -183,7 +183,7 @@ function Page() {
                     />
 
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-6',
@@ -195,7 +195,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-6',
@@ -208,7 +208,7 @@ function Page() {
                     />
 
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-4',
@@ -220,7 +220,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-4',
@@ -232,7 +232,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-4',
@@ -245,7 +245,7 @@ function Page() {
                     />
 
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-3',
@@ -257,7 +257,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-3',
@@ -269,7 +269,7 @@ function Page() {
                         ]}
                     />
                     <GridContainer
-                        className={styles.dummyElement}
+                        className={styles['dummyElement']}
                         attributes={[
                             'xs-12',
                             's-3',
@@ -293,7 +293,7 @@ function Page() {
                         ]}
                     >
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-12',
@@ -305,7 +305,7 @@ function Page() {
                         />
 
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-6',
@@ -317,7 +317,7 @@ function Page() {
                             ]}
                         />
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-6',
@@ -330,7 +330,7 @@ function Page() {
                         />
 
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-4',
@@ -342,7 +342,7 @@ function Page() {
                             ]}
                         />
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-4',
@@ -354,7 +354,7 @@ function Page() {
                             ]}
                         />
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-4',
@@ -367,7 +367,7 @@ function Page() {
                         />
 
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-3',
@@ -379,7 +379,7 @@ function Page() {
                             ]}
                         />
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-3',
@@ -391,7 +391,7 @@ function Page() {
                             ]}
                         />
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-3',
@@ -403,7 +403,7 @@ function Page() {
                             ]}
                         />
                         <GridContainer
-                            className={styles.dummyElement}
+                            className={styles['dummyElement']}
                             attributes={[
                                 'xs-12',
                                 's-3',
diff --git a/pages/hall-of-fame/jorien-beukers.tsx b/pages/hall-of-fame/jorien-beukers.tsx
index 02226f58..83980b0e 100644
--- a/pages/hall-of-fame/jorien-beukers.tsx
+++ b/pages/hall-of-fame/jorien-beukers.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import styles from './Styles.module.scss';
-import articleStyles from '../[section]/[id]/Article.module.scss';
+import * as styles from './Styles.module.scss';
+import * as articleStyles from '../[section]/[id]/Article.module.scss';
 import { Quote } from '../../src/components/quote/Quote';
 import { NumberFrame } from '../../src/components/numberframe/NumberFrame';
 import { WordFrame } from '../../src/components/wordframe/WordFrame';
@@ -67,14 +67,14 @@ function JorienBeukers() {
             </Head>
 
             <article
-                className={`${styles.hallOfFame} ${articleStyles.article}`}
+                className={`${styles['hallOfFame']} ${articleStyles['article']}`}
             >
                 <header>
                     <h1>JBreaking News</h1>
                 </header>
 
                 <ArticleMeta authors={[{ id: 1, fullName: 'Carlo M.' }]} />
-                <div className={styles.embedContainer}>
+                <div className={styles['embedContainer']}>
                     <iframe
                         width="560"
                         height="315"
diff --git a/pages/modal.tsx b/pages/modal.tsx
index 4f04eae3..d8e35416 100644
--- a/pages/modal.tsx
+++ b/pages/modal.tsx
@@ -3,7 +3,7 @@ import { Explain } from '../src/components/Explain';
 import { Modal, getCssClassNames } from '../src/components/modal/Modal';
 import Head from 'next/head';
 import { Switch } from '../src/components/input/Switch';
-import styles from './modal.module.scss';
+import * as styles from './modal.module.scss';
 import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 import { ButtonCta } from '../src/deno';
 
@@ -61,7 +61,7 @@ function Page() {
                 }
             >
                 <Modal
-                    contentBoxClassName={styles.modal}
+                    contentBoxClassName={styles['modal']}
                     opened={opened}
                     onClose={handleModalClose}
                 >
diff --git a/pages/search.tsx b/pages/search.tsx
index bc5e5244..3f8d6e4f 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -7,7 +7,7 @@ import { GridContainer } from '@fdmg/css-grid/GridContainer';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import styles from './search.module.scss';
+import * as styles from './search.module.scss';
 
 import { metaTitle as abTitle, metaDescription as abDescription } from './ab';
 import {
@@ -423,14 +423,17 @@ export default function Page() {
     useEffect(() => {
         const observer = new MutationObserver(() => {
             interceptLinks(
-                document.querySelectorAll(`.${styles.searchResults} a[href]`)
+                document.querySelectorAll(`.${styles['searchResults']} a[href]`)
             );
         });
-        observer.observe(document.querySelector(`.${styles.searchResults}`), {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
+        observer.observe(
+            document.querySelector(`.${styles['searchResults']}`),
+            {
+                attributes: true,
+                childList: true,
+                subtree: true,
+            }
+        );
         return () => {
             observer.disconnect();
         };
@@ -457,7 +460,7 @@ export default function Page() {
     }, [searchString]);
 
     return (
-        <section className={styles.search}>
+        <section className={styles['search']}>
             <Head>
                 <title>Search - Design System - Het Financieele Dagblad</title>
                 <meta
@@ -480,7 +483,7 @@ export default function Page() {
             </Head>
 
             <GridContainer
-                className={styles.searchContent}
+                className={styles['searchContent']}
                 attributes={['grid']}
             >
                 <GridContainer attributes={['xs-12']}>
@@ -489,12 +492,12 @@ export default function Page() {
                         action="/search"
                         onSubmit={handleSearchSubmit}
                     >
-                        <div className={styles.searchForm}>
+                        <div className={styles['searchForm']}>
                             {searchString ? (
                                 <TextInput
                                     key={searchString}
                                     id="searchString"
-                                    className={styles.searchTextInput}
+                                    className={styles['searchTextInput']}
                                     label="Search"
                                     name="q"
                                     aria-label="Search text"
@@ -504,7 +507,7 @@ export default function Page() {
                                 <TextInput
                                     key="noSearchString"
                                     id="searchString"
-                                    className={styles.searchTextInput}
+                                    className={styles['searchTextInput']}
                                     label="Search"
                                     name="q"
                                     aria-label="Search text"
@@ -513,7 +516,7 @@ export default function Page() {
                         </div>
                     </form>
                     {results?.length ? <h2>{results.length} Results</h2> : null}
-                    <div className={styles.searchResults}>
+                    <div className={styles['searchResults']}>
                         {results.map((result, idx) => {
                             const path = `${result[0]}`;
                             const title = result[1].title;
diff --git a/pages/tokens.tsx b/pages/tokens.tsx
index 0b84fafe..312fbb68 100644
--- a/pages/tokens.tsx
+++ b/pages/tokens.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './tokens.module.scss';
+import * as styles from './tokens.module.scss';
 import fs from 'fs';
 import path from 'path';
 import Head from 'next/head';
@@ -22,7 +22,7 @@ function Tokens(props: Props) {
     }
 
     const colorGroups = Object.entries(colors.colors).map((colors) => (
-        <div key={colors[0]} className={styles.group}>
+        <div key={colors[0]} className={styles['group']}>
             <h2>{colors[0]}</h2>
             <div>
                 {Object.entries(colors[1]).map((value) => {
@@ -30,7 +30,7 @@ function Tokens(props: Props) {
                         <div key={`${colors[0]}-${value[0]}`}>
                             <label
                                 htmlFor={`${colors[0]}-${value[0]}`}
-                                className={styles.colorTile}
+                                className={styles['colorTile']}
                                 style={{ backgroundColor: value[1] }}
                             />
                             <label htmlFor={`${colors[0]}-${value[0]}`}>
@@ -50,7 +50,7 @@ function Tokens(props: Props) {
     ));
 
     const fonts = Object.entries(typography['font-family']).map((fonts) => (
-        <div key={fonts[0]} className={styles.group}>
+        <div key={fonts[0]} className={styles['group']}>
             <div>
                 <label
                     htmlFor={`${fonts[0]}-${fonts[0]}`}
@@ -70,7 +70,7 @@ function Tokens(props: Props) {
     ));
 
     return (
-        <section className={styles.tokens}>
+        <section className={styles['tokens']}>
             <Head>
                 <title>
                     {`${metaTitle} - Design System - Het Financieele Dagblad`}
@@ -95,7 +95,7 @@ function Tokens(props: Props) {
                 />
             </fieldset>
 
-            <div className={styles.groupContainer}>{colorGroups}</div>
+            <div className={styles['groupContainer']}>{colorGroups}</div>
 
             <fieldset>
                 <legend>Typography:</legend>
@@ -105,7 +105,7 @@ function Tokens(props: Props) {
                 />
             </fieldset>
 
-            <div className={styles.fontsContainer}>
+            <div className={styles['fontsContainer']}>
                 <h2>Fonts</h2>
                 {fonts}
             </div>
@@ -118,13 +118,13 @@ function Tokens(props: Props) {
                 />
             </fieldset>
 
-            <div className={styles.fontsContainer}>
+            <div className={styles['fontsContainer']}>
                 <h2>SVG Icons</h2>
                 <div>
                     {props.icons.map((icon, idx) => (
                         <span
                             key={idx}
-                            className={`${styles.icon}`}
+                            className={`${styles['icon']}`}
                             dangerouslySetInnerHTML={{ __html: icon }}
                         />
                     ))}
diff --git a/src/components/Aside.tsx b/src/components/Aside.tsx
index c29e0fd5..ebfc5749 100644
--- a/src/components/Aside.tsx
+++ b/src/components/Aside.tsx
@@ -1,5 +1,5 @@
-import styles from './menu/Menu.module.scss';
-import asideStyles from './Aside.module.scss';
+import * as styles from './menu/Menu.module.scss';
+import * as asideStyles from './Aside.module.scss';
 import {
     CloseIcon,
     CollapseIcon,
@@ -75,7 +75,7 @@ function Aside(props: Props) {
                         aria-label="Toggle Main sub-menu"
                         onClick={handleToggle.bind(null, 'main')}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <LogoFdIcon />
                         </span>
                         <span
@@ -109,7 +109,7 @@ function Aside(props: Props) {
                                 <span className="heading sans xxs">
                                     Brandbook
                                 </span>
-                                <span className={asideStyles.popup}>
+                                <span className={asideStyles['popup']}>
                                     <LinkWebsiteIcon />
                                 </span>
                             </a>
@@ -128,7 +128,7 @@ function Aside(props: Props) {
                                 onClick={handleNavigation}
                             >
                                 <span className="heading sans xxs">Colors</span>
-                                <span className={asideStyles.popup}>
+                                <span className={asideStyles['popup']}>
                                     <LinkWebsiteIcon />
                                 </span>
                             </a>
@@ -149,7 +149,7 @@ function Aside(props: Props) {
                                 <span className="heading sans xxs">
                                     Downloads
                                 </span>
-                                <span className={asideStyles.popup}>
+                                <span className={asideStyles['popup']}>
                                     <LinkWebsiteIcon />
                                 </span>
                             </a>
@@ -181,7 +181,7 @@ function Aside(props: Props) {
                         aria-label="Toggle Article sub-menu"
                         onClick={handleToggle.bind(null, 'article')}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <NewspaperIcon />
                         </span>
                         <span
@@ -478,7 +478,7 @@ function Aside(props: Props) {
                         aria-label="Toggle Controls sub-menu"
                         onClick={handleToggle.bind(null, 'controls')}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <PencilIcon />
                         </span>
                         <span
@@ -737,7 +737,7 @@ function Aside(props: Props) {
                         aria-label="Toggle Cards sub-menu"
                         onClick={handleToggle.bind(null, 'cards')}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <EnvelopeIcon />
                         </span>
                         <span
@@ -960,7 +960,7 @@ function Aside(props: Props) {
                         aria-label="Toggle Grid sub-menu"
                         onClick={handleToggle.bind(null, 'grid')}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <Windows8Icon />
                         </span>
                         <span
@@ -994,7 +994,7 @@ function Aside(props: Props) {
                                 <span className="heading sans xxs">
                                     CSS Grid
                                 </span>
-                                <span className={asideStyles.popup}>
+                                <span className={asideStyles['popup']}>
                                     <LinkWebsiteIcon />
                                 </span>
                             </a>
@@ -1063,7 +1063,7 @@ function Aside(props: Props) {
                                 <span className="heading sans xxs">
                                     Paddings/Margins system
                                 </span>
-                                <span className={asideStyles.popup}>
+                                <span className={asideStyles['popup']}>
                                     <LinkWebsiteIcon />
                                 </span>
                             </a>
@@ -1081,7 +1081,7 @@ function Aside(props: Props) {
                         aria-label="Toggle Typography sub-menu"
                         onClick={handleToggle.bind(null, 'typography')}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <HamburgerIcon />
                         </span>
                         <span
@@ -1129,7 +1129,7 @@ function Aside(props: Props) {
                                 rel="noreferrer noopener"
                             >
                                 <span className="heading sans xxs">Docs</span>
-                                <span className={asideStyles.popup}>
+                                <span className={asideStyles['popup']}>
                                     <LinkWebsiteIcon />
                                 </span>
                             </a>
@@ -1147,7 +1147,7 @@ function Aside(props: Props) {
                         aria-label="Toggle miscellaneous sub-menu"
                         onClick={handleToggle.bind(null, 'misc')}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <PaperclipIcon />
                         </span>
                         <span
@@ -1290,7 +1290,7 @@ function Aside(props: Props) {
                         target="_blank"
                         rel="noreferrer noopener"
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <GithubIcon />
                         </span>
                         <span
@@ -1298,7 +1298,7 @@ function Aside(props: Props) {
                         >
                             GitHub
                         </span>
-                        <span className={asideStyles.popup}>
+                        <span className={asideStyles['popup']}>
                             <LinkWebsiteIcon />
                         </span>
                     </a>
diff --git a/src/components/Explain.tsx b/src/components/Explain.tsx
index 7d88d33d..f6686a90 100644
--- a/src/components/Explain.tsx
+++ b/src/components/Explain.tsx
@@ -5,7 +5,7 @@ import React, {
     useRef,
     CSSProperties,
 } from 'react';
-import styles from './Explain.module.scss';
+import * as styles from './Explain.module.scss';
 import { getCodePenData } from '../utils/codepen';
 import { renderToString } from 'react-dom/server';
 import pretty from 'pretty';
@@ -204,11 +204,11 @@ function Explain(props: Props) {
     return (
         <>
             {props.anchor ? <a id={props.anchor} /> : null}
-            <h2 className={styles.title}>
+            <h2 className={styles['title']}>
                 {props.legend}
                 {props.anchor ? (
                     <button
-                        className={styles.anchor}
+                        className={styles['anchor']}
                         onClick={copyAnchor.bind(null, props.anchor)}
                         title="Copy link"
                         aria-label={`Copy link to ${props.legend}`}
@@ -218,7 +218,7 @@ function Explain(props: Props) {
                 ) : null}
             </h2>
             {props.description && (
-                <section className={styles.description}>
+                <section className={styles['description']}>
                     {props.description}
                 </section>
             )}
@@ -226,9 +226,9 @@ function Explain(props: Props) {
                 <form
                     ref={formRef}
                     style={props.previewStyle}
-                    className={`${styles.previewContainer}${
+                    className={`${styles['previewContainer']}${
                         props.previewFlexDirection === 'row'
-                            ? ` ${styles.row}`
+                            ? ` ${styles['row']}`
                             : ''
                     }${
                         props.previewClassName
@@ -241,7 +241,7 @@ function Explain(props: Props) {
                 </form>
             )}
             {!props.hideExternalCodeEditors && (
-                <footer className={styles.footer}>
+                <footer className={styles['footer']}>
                     <form
                         target="_blank"
                         action="https://codepen.io/pen/define/"
@@ -261,7 +261,7 @@ function Explain(props: Props) {
                             )}
                         />
                         <input
-                            className={styles.invertable}
+                            className={styles['invertable']}
                             type="image"
                             src="/assets/codepen/Button-Black.png"
                             width="16"
@@ -309,29 +309,29 @@ function Explain(props: Props) {
             )}
 
             <h3
-                className={styles.codeToggle}
+                className={styles['codeToggle']}
                 onClick={handleCodeToggle}
                 title="Toggle code"
             >
                 Code: {showCode ? '🔽' : '🔼'}
             </h3>
             <section
-                className={`${styles.codeContainer}${
-                    showCode ? '' : ` ${styles.hideCode}`
+                className={`${styles['codeContainer']}${
+                    showCode ? '' : ` ${styles['hideCode']}`
                 }`}
             >
                 {!props.hideCSS && (
                     <section>
                         <section>
                             <a
-                                className={styles.copyIcon}
+                                className={styles['copyIcon']}
                                 onClick={copyCss}
                                 title="Copy CSS to clipboard"
                             >
                                 📋
                             </a>
                             <a
-                                className={styles.copyIconLabel}
+                                className={styles['copyIconLabel']}
                                 href={`data:text/plain;charset=utf-16le;base64,${cssBase64}`}
                                 target="_blank"
                                 rel="noopener noreferrer"
@@ -342,7 +342,7 @@ function Explain(props: Props) {
                             </a>
                         </section>
                         <textarea
-                            className={styles.textArea}
+                            className={styles['textArea']}
                             value={css}
                             readOnly={true}
                         />
@@ -352,7 +352,7 @@ function Explain(props: Props) {
                     <section>
                         <section>
                             <a
-                                className={styles.copyIcon}
+                                className={styles['copyIcon']}
                                 onClick={copyHtml}
                                 title="Copy HTML to clipboard"
                             >
@@ -361,7 +361,7 @@ function Explain(props: Props) {
                             HTML
                         </section>
                         <textarea
-                            className={styles.textArea}
+                            className={styles['textArea']}
                             value={html}
                             readOnly={true}
                         />
@@ -371,7 +371,7 @@ function Explain(props: Props) {
                     <section>
                         <section>
                             <a
-                                className={styles.copyIcon}
+                                className={styles['copyIcon']}
                                 onClick={copyReact}
                                 title="Copy React code to clipboard"
                             >
@@ -380,7 +380,7 @@ function Explain(props: Props) {
                             React
                         </section>
                         <textarea
-                            className={styles.textArea}
+                            className={styles['textArea']}
                             value={react}
                             readOnly={true}
                         />
@@ -388,7 +388,7 @@ function Explain(props: Props) {
                 )}
             </section>
 
-            <section className={styles.tags}>
+            <section className={styles['tags']}>
                 {!!tags?.length && <span>Synonyms:</span>}
                 {tags?.map((tag) => (
                     <Link key={tag} href={destination} as={`/${tag}`}>
diff --git a/src/components/Themes.tsx b/src/components/Themes.tsx
index 73262334..7da18c30 100644
--- a/src/components/Themes.tsx
+++ b/src/components/Themes.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { CollapseIcon, ExpandIcon } from '../design-tokens/icons';
 import ThemeStore, { Theme } from '../stores/ThemeStore';
 import { Radio } from './input/Radio';
-import styles from './menu/Menu.module.scss';
+import * as styles from './menu/Menu.module.scss';
 
 interface Props {
     groupName?: string;
@@ -87,7 +87,7 @@ function Themes(props: Props) {
 
     return (
         <section
-            className={`${styles.theme} xs__m-0 xs__pt+4 xs__pb+4 xs__ml-4 xs__mr-4 xs__mb-4`}
+            className={`${styles['theme']} xs__m-0 xs__pt+4 xs__pb+4 xs__ml-4 xs__mr-4 xs__mb-4`}
         >
             <div className="xs__pl+4 xs__pr+4">
                 <button
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 9f914c74..6c41830a 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import styles from './Tooltip.module.scss';
+import * as styles from './Tooltip.module.scss';
 import TooltipStore from '../stores/TooltipStore';
 
 type Token = {
@@ -36,7 +36,7 @@ function Tooltip() {
     }
 
     return tooltipSummary ? (
-        <div className={styles.tooltip} onClick={handleClick}>
+        <div className={styles['tooltip']} onClick={handleClick}>
             <h3>Design Tokens</h3>
             {styleProps.map((styleProp) => {
                 if (tooltipSummary[styleProp]) {
diff --git a/src/components/ab/Debug.tsx b/src/components/ab/Debug.tsx
index eae45264..ce088e46 100644
--- a/src/components/ab/Debug.tsx
+++ b/src/components/ab/Debug.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Debug.module.scss';
+import * as styles from './Debug.module.scss';
 import { CloseIcon } from '../../design-tokens/icons';
 import { Modal } from '../modal/Modal';
 
@@ -20,16 +20,16 @@ export function Debug(props: Props) {
 
     return (
         <Modal
-            className={`${styles.debug} debug-modal`}
+            className={`${styles['debug']} debug-modal`}
             opened={props.open}
             onClose={props.handleClose}
         >
             <div>
-                <section className={styles.content}>
+                <section className={styles['content']}>
                     <h2>
                         {props.name}
                         <span
-                            className={styles.icon}
+                            className={styles['icon']}
                             onClick={handleRemoveExperiment}
                             title="Remove experiment cookie"
                         >
diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx
index b7504b5a..26a7a688 100644
--- a/src/components/accordion/Accordion.tsx
+++ b/src/components/accordion/Accordion.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Accordion.module.scss';
+import * as styles from './Accordion.module.scss';
 import { MinimiseIcon, ExpandIcon } from '../../design-tokens/icons';
 
 export interface Item {
@@ -17,7 +17,7 @@ interface Props {
 function Accordion(props: Props) {
     return (
         <div
-            className={`${styles.fdAccordion}${
+            className={`${styles['fdAccordion']}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
@@ -36,17 +36,17 @@ function Accordion(props: Props) {
                     />
                     <label
                         htmlFor={item.anchor ?? `q-${idx}`}
-                        className={`${styles.icon} ${styles.minimise}`}
+                        className={`${styles['icon']} ${styles['minimise']}`}
                     >
                         <MinimiseIcon />
                     </label>
                     <label
                         htmlFor={item.anchor ?? `q-${idx}`}
-                        className={`${styles.icon} ${styles.expand}`}
+                        className={`${styles['icon']} ${styles['expand']}`}
                     >
                         <ExpandIcon />
                     </label>
-                    <div className={styles.textContent}>
+                    <div className={styles['textContent']}>
                         <label htmlFor={item.anchor ?? `q-${idx}`}>
                             <h2>{item.title}</h2>
                         </label>
@@ -59,7 +59,7 @@ function Accordion(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdAccordion];
+    return [styles['fdAccordion']];
 }
 
 export { Accordion, getCssClassNames };
diff --git a/src/components/article-image/ArticleImage.tsx b/src/components/article-image/ArticleImage.tsx
index 80899d08..26af765c 100644
--- a/src/components/article-image/ArticleImage.tsx
+++ b/src/components/article-image/ArticleImage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ArticleImage.module.scss';
+import * as styles from './ArticleImage.module.scss';
 
 interface Props {
     baseUrl?: string;
@@ -14,7 +14,7 @@ interface Props {
  */
 function ArticleImage(props: Props) {
     return (
-        <figure className={styles.articleImage}>
+        <figure className={styles['articleImage']}>
             <picture>
                 <source
                     media="(max-width:640px)"
@@ -52,10 +52,10 @@ function ArticleImage(props: Props) {
             </picture>
             <figcaption>
                 {props.caption && (
-                    <span className={styles.caption}>{props.caption}</span>
+                    <span className={styles['caption']}>{props.caption}</span>
                 )}
                 {props.credit && (
-                    <span className={styles.credit}>{props.credit}</span>
+                    <span className={styles['credit']}>{props.credit}</span>
                 )}
             </figcaption>
         </figure>
@@ -63,7 +63,7 @@ function ArticleImage(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.articleImage];
+    return [styles['articleImage']];
 }
 
 export { ArticleImage, getCssClassNames };
diff --git a/src/components/article-image/InfographicExtended.tsx b/src/components/article-image/InfographicExtended.tsx
index 623e23e3..3e175b80 100644
--- a/src/components/article-image/InfographicExtended.tsx
+++ b/src/components/article-image/InfographicExtended.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './InfographicExtended.module.scss';
+import * as styles from './InfographicExtended.module.scss';
 
 interface Props {
     darkModeInvert?: boolean;
@@ -19,8 +19,8 @@ interface Props {
 function InfographicExtended(props: Props) {
     return (
         <figure
-            className={`${styles.infographicExtended}${
-                props.darkModeInvert ? ` ${styles.invertable}` : ''
+            className={`${styles['infographicExtended']}${
+                props.darkModeInvert ? ` ${styles['invertable']}` : ''
             }`}
         >
             <picture>
@@ -58,7 +58,7 @@ function InfographicExtended(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.infographicExtended];
+    return [styles['infographicExtended']];
 }
 
 export { InfographicExtended, getCssClassNames };
diff --git a/src/components/article-latest-news/ArticleLatestNews.tsx b/src/components/article-latest-news/ArticleLatestNews.tsx
index cd62dc7e..87d0ac1d 100644
--- a/src/components/article-latest-news/ArticleLatestNews.tsx
+++ b/src/components/article-latest-news/ArticleLatestNews.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ArticleLatestNews.module.scss';
+import * as styles from './ArticleLatestNews.module.scss';
 import { ChevronRightIcon } from '../../design-tokens/icons';
 
 interface NewsItem {
@@ -25,7 +25,7 @@ export interface Props {
  */
 function ArticleLatestNews(props: Props) {
     return (
-        <div className={styles.fdLatestNews}>
+        <div className={styles['fdLatestNews']}>
             <h3 className="heading sans xs">
                 {props.title ?? 'Laatste nieuws'}
             </h3>
@@ -40,7 +40,7 @@ function ArticleLatestNews(props: Props) {
                             <time>{newsItem.dateTime}</time>
                             <span
                                 className={
-                                    newsItem.isRead ? styles.isRead : null
+                                    newsItem.isRead ? styles['isRead'] : null
                                 }
                             >
                                 {newsItem.title}
@@ -54,7 +54,7 @@ function ArticleLatestNews(props: Props) {
                 className="body-text sans s"
             >
                 {props.linkText ?? 'Lees al het laatste nieuws'}
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <ChevronRightIcon />
                 </span>
             </a>
@@ -63,7 +63,7 @@ function ArticleLatestNews(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdLatestNews, 'heading', 'body-text'];
+    return [styles['fdLatestNews'], 'heading', 'body-text'];
 }
 
 export { ArticleLatestNews, getCssClassNames };
diff --git a/src/components/article-link-block/LinkBlock.tsx b/src/components/article-link-block/LinkBlock.tsx
index 0f170aa0..30310c64 100644
--- a/src/components/article-link-block/LinkBlock.tsx
+++ b/src/components/article-link-block/LinkBlock.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './LinkBlock.module.scss';
+import * as styles from './LinkBlock.module.scss';
 import { ChevronRightIcon } from '../../design-tokens/icons';
 
 interface Props {
@@ -19,14 +19,14 @@ function LinkBlock(props: Props) {
         <a
             target="_blank"
             rel="noopener noreferrer"
-            className={`${styles.fdLinkBlock} ${
-                props.position === 'right' ? styles.right : ''
+            className={`${styles['fdLinkBlock']} ${
+                props.position === 'right' ? styles['right'] : ''
             }`}
             href={props.url}
         >
             <p>{props.title}</p>
             <h2>{props.description}</h2>
-            <span className={styles.icon}>
+            <span className={styles['icon']}>
                 <ChevronRightIcon />
             </span>
         </a>
@@ -34,7 +34,7 @@ function LinkBlock(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdLinkBlock];
+    return [styles['fdLinkBlock']];
 }
 
 export { LinkBlock, getCssClassNames };
diff --git a/src/components/article-link-card/LinkCard.tsx b/src/components/article-link-card/LinkCard.tsx
index a3ad9a7d..fccf8fc4 100644
--- a/src/components/article-link-card/LinkCard.tsx
+++ b/src/components/article-link-card/LinkCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './LinkCard.module.scss';
+import * as styles from './LinkCard.module.scss';
 import { ChevronRightIcon } from '../../design-tokens/icons';
 
 export interface Props {
@@ -13,7 +13,7 @@ export default function LinkCard(props: Props) {
     return (
         <>
             <div
-                className={`${styles.linkCard}${
+                className={`${styles['linkCard']}${
                     props.className ? ` ${props.className}` : ''
                 }`}
             >
@@ -22,7 +22,7 @@ export default function LinkCard(props: Props) {
                     {props.linkText
                         ? props.linkText
                         : 'Beheer uw nieuwsbriefinstellingen'}{' '}
-                    <span className={styles.icon}>
+                    <span className={styles['icon']}>
                         <ChevronRightIcon />
                     </span>
                 </a>
@@ -32,7 +32,7 @@ export default function LinkCard(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.linkCard];
+    return [styles['linkCard']];
 }
 
 export { LinkCard, getCssClassNames };
diff --git a/src/components/article-meta/ArticleMeta.tsx b/src/components/article-meta/ArticleMeta.tsx
index c9350302..16a7d5b1 100644
--- a/src/components/article-meta/ArticleMeta.tsx
+++ b/src/components/article-meta/ArticleMeta.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ArticleMeta.module.scss';
+import * as styles from './ArticleMeta.module.scss';
 
 type Author = {
     id: number;
@@ -18,7 +18,7 @@ interface Props {
  */
 function ArticleMeta(props: Props) {
     return (
-        <section className={styles.meta}>
+        <section className={styles['meta']}>
             <span>
                 {props.authors.map((author) => {
                     if (author?.directory) {
@@ -26,7 +26,7 @@ function ArticleMeta(props: Props) {
                             <a
                                 key={author.fullName}
                                 href={`/auteur/${author.directory}`}
-                                className={styles.author}
+                                className={styles['author']}
                             >
                                 {author.fullName}
                             </a>
@@ -35,7 +35,7 @@ function ArticleMeta(props: Props) {
                         return (
                             <span
                                 key={author.fullName}
-                                className={styles.author}
+                                className={styles['author']}
                             >
                                 {author.fullName}
                             </span>
@@ -49,7 +49,7 @@ function ArticleMeta(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.meta];
+    return [styles['meta']];
 }
 
 export { ArticleMeta, getCssClassNames };
diff --git a/src/components/article-related-topics/RelatedTopics.tsx b/src/components/article-related-topics/RelatedTopics.tsx
index d7889763..0554d33e 100644
--- a/src/components/article-related-topics/RelatedTopics.tsx
+++ b/src/components/article-related-topics/RelatedTopics.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonFollow } from '../button/ButtonFollow';
-import styles from './RelatedTopics.module.scss';
+import * as styles from './RelatedTopics.module.scss';
 
 type Topic = {
     topic: string;
diff --git a/src/components/article-summary/Summary.tsx b/src/components/article-summary/Summary.tsx
index 7bdb248b..0c79ebbf 100644
--- a/src/components/article-summary/Summary.tsx
+++ b/src/components/article-summary/Summary.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Summary.module.scss';
+import * as styles from './Summary.module.scss';
 
 export type Variants = 'default' | 'variant-1' | 'variant-2';
 
@@ -15,7 +15,7 @@ interface Props {
  */
 function Summary(props: Props) {
     return (
-        <div data-variant={props.variant} className={styles.summary}>
+        <div data-variant={props.variant} className={styles['summary']}>
             <h3 className="heading sans s">{props.title ?? 'In het kort'}</h3>
             <ul className="body-text sans s">
                 {props.summaries.map((summary) => (
@@ -30,7 +30,7 @@ function Summary(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.summary];
+    return [styles['summary']];
 }
 
 export { Summary, getCssClassNames };
diff --git a/src/components/article-tags/ArticleTags.tsx b/src/components/article-tags/ArticleTags.tsx
index 3aa2f93e..aa173f47 100644
--- a/src/components/article-tags/ArticleTags.tsx
+++ b/src/components/article-tags/ArticleTags.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ArticleTags.module.scss';
+import * as styles from './ArticleTags.module.scss';
 import {
     ButtonFollow,
     getCssClassNames as getButtonFollowCssClassNames,
@@ -60,7 +60,7 @@ function ArticleTags(props: Props) {
 
     return (
         <div
-            className={`${styles.fdArticleTags}${
+            className={`${styles['fdArticleTags']}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
@@ -77,8 +77,8 @@ function ArticleTags(props: Props) {
                 {props.tags.map((tag: Tag) => (
                     <li key={tag.uuid}>
                         <div
-                            className={`${styles.tagContainer}${
-                                tag.selected ? ` ${styles.selected}` : ''
+                            className={`${styles['tagContainer']}${
+                                tag.selected ? ` ${styles['selected']}` : ''
                             }`}
                         >
                             <a
@@ -89,11 +89,11 @@ function ArticleTags(props: Props) {
                             >
                                 {tag.tag}
                             </a>
-                            <span className={styles.tagControls}>
+                            <span className={styles['tagControls']}>
                                 <span
-                                    className={`${styles.alert}${
+                                    className={`${styles['alert']}${
                                         tag.alertSelected
-                                            ? ` ${styles.selected}`
+                                            ? ` ${styles['selected']}`
                                             : ''
                                     }`}
                                     data-addurl={
@@ -108,14 +108,14 @@ function ArticleTags(props: Props) {
                                     }
                                 >
                                     <span
-                                        className={styles.defaultIcon}
+                                        className={styles['defaultIcon']}
                                         data-tag={tag.tag}
                                         onClick={onEnableAlertClick}
                                     >
                                         <BellOIcon />
                                     </span>
                                     <span
-                                        className={styles.activeIcon}
+                                        className={styles['activeIcon']}
                                         data-tag={tag.tag}
                                         onClick={onDisableAlertClick}
                                     >
@@ -141,7 +141,7 @@ function ArticleTags(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdArticleTags, ...getButtonFollowCssClassNames()];
+    return [styles['fdArticleTags'], ...getButtonFollowCssClassNames()];
 }
 
 export { ArticleTags, getCssClassNames };
diff --git a/src/components/author-info/AuthorInfo.tsx b/src/components/author-info/AuthorInfo.tsx
index 47c1c66b..2f38d256 100644
--- a/src/components/author-info/AuthorInfo.tsx
+++ b/src/components/author-info/AuthorInfo.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './AuthorInfo.module.scss';
+import * as styles from './AuthorInfo.module.scss';
 import {
     ButtonFollow,
     getCssClassNames as getFollowButtonCssClassNames,
@@ -38,18 +38,18 @@ function AuthorInfo(props: Props) {
 
     return (
         <div
-            className={`${styles.fdAuthorInfo}${
+            className={`${styles['fdAuthorInfo']}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
-            <div className={styles.profile}>
+            <div className={styles['profile']}>
                 <img src={props.imageUrl} alt={props.title} />
                 <h3>{props.title}</h3>
-                <div className={styles.description}>{props.description}</div>
+                <div className={styles['description']}>{props.description}</div>
             </div>
-            <div className={styles.controls}>
+            <div className={styles['controls']}>
                 <ButtonFollow
-                    className={styles.followButton}
+                    className={styles['followButton']}
                     selected={props.followed}
                     tag={props.title}
                     onClick={onFollowAuthorClick}
@@ -57,35 +57,35 @@ function AuthorInfo(props: Props) {
                 />
                 {props.onEmailClick ? (
                     <Button
-                        className={styles.button}
+                        className={styles['button']}
                         onClick={props.onEmailClick}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <EnvelopeIcon />
                         </span>
-                        <span className={styles.buttonText}>E-mail</span>
+                        <span className={styles['buttonText']}>E-mail</span>
                     </Button>
                 ) : null}
                 {props.onTwitterClick ? (
                     <Button
-                        className={styles.button}
+                        className={styles['button']}
                         onClick={props.onTwitterClick}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <TwitterIcon />
                         </span>
-                        <span className={styles.buttonText}>Twitter</span>
+                        <span className={styles['buttonText']}>Twitter</span>
                     </Button>
                 ) : null}
                 {props.onLinkedInClick ? (
                     <Button
-                        className={styles.button}
+                        className={styles['button']}
                         onClick={props.onLinkedInClick}
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <LinkedInIcon />
                         </span>
-                        <span className={styles.buttonText}>LinkedIn</span>
+                        <span className={styles['buttonText']}>LinkedIn</span>
                     </Button>
                 ) : null}
             </div>
@@ -95,7 +95,7 @@ function AuthorInfo(props: Props) {
 
 function getCssClassNames(): string[] {
     return [
-        styles.fdAuthorInfo,
+        styles['fdAuthorInfo'],
         ...getFollowButtonCssClassNames(),
         ...getButtonCssClassNames(),
     ];
diff --git a/src/components/bullet-point/BulletPoint.tsx b/src/components/bullet-point/BulletPoint.tsx
index 3e2741e0..d9ad1e38 100644
--- a/src/components/bullet-point/BulletPoint.tsx
+++ b/src/components/bullet-point/BulletPoint.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './BulletPoint.module.scss';
+import * as styles from './BulletPoint.module.scss';
 import { BulletIcon, BulletRedIcon } from '../../design-tokens/icons';
 
 export type Alignment = 'block' | 'right';
@@ -18,18 +18,18 @@ function BulletPoint(props: Props) {
     return (
         <div
             data-variant={props.variant}
-            className={`${styles.bulletPoint} ${
-                props.alignment === 'right' ? styles.right : ''
+            className={`${styles['bulletPoint']} ${
+                props.alignment === 'right' ? styles['right'] : ''
             }`}
         >
             {props.bullets.map((bullet, idx) => (
                 <p key={idx}>
                     {props.variant ? (
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <BulletRedIcon />
                         </span>
                     ) : (
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <BulletIcon />
                         </span>
                     )}
@@ -41,7 +41,7 @@ function BulletPoint(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.bulletPoint];
+    return [styles['bulletPoint']];
 }
 
 export { BulletPoint, getCssClassNames };
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index d65227e3..57584834 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Button.module.scss';
+import * as styles from './Button.module.scss';
 
 type Sizes = 's' | 'm';
 
@@ -17,12 +17,12 @@ interface Props {
  * @param props
  */
 function Button(props: Props) {
-    const sizeClass = props.size === 'm' ? styles.m : '';
+    const sizeClass = props.size === 'm' ? styles['m'] : '';
 
     return (
         <button
             {...props}
-            className={`${styles.fdButton} ${sizeClass}${
+            className={`${styles['fdButton']} ${sizeClass}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
@@ -32,7 +32,7 @@ function Button(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdButton];
+    return [styles['fdButton']];
 }
 
 export { Button, getCssClassNames };
diff --git a/src/components/button/ButtonCta.tsx b/src/components/button/ButtonCta.tsx
index e7e49f07..4506f43a 100644
--- a/src/components/button/ButtonCta.tsx
+++ b/src/components/button/ButtonCta.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ButtonCta.module.scss';
+import * as styles from './ButtonCta.module.scss';
 
 type Sizes = 's' | 'm';
 
@@ -17,12 +17,12 @@ interface Props {
  * @param props
  */
 function ButtonCta(props: Props) {
-    const sizeClass = props.size === 'm' ? styles.m : '';
+    const sizeClass = props.size === 'm' ? styles['m'] : '';
 
     return (
         <button
             {...props}
-            className={`${styles.fdButtonCta} ${sizeClass}${
+            className={`${styles['fdButtonCta']} ${sizeClass}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
@@ -32,7 +32,7 @@ function ButtonCta(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdButtonCta];
+    return [styles['fdButtonCta']];
 }
 
 export { ButtonCta, getCssClassNames };
diff --git a/src/components/button/ButtonFollow.tsx b/src/components/button/ButtonFollow.tsx
index 29bf3ef8..75d4eab6 100644
--- a/src/components/button/ButtonFollow.tsx
+++ b/src/components/button/ButtonFollow.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ButtonFollow.module.scss';
+import * as styles from './ButtonFollow.module.scss';
 
 interface Props {
     className?: string;
@@ -21,7 +21,7 @@ function ButtonFollow(props: Props) {
         <>
             <button
                 {...props}
-                className={`${styles.fdFollowButton}${
+                className={`${styles['fdFollowButton']}${
                     props.className ? ` ${props.className}` : ''
                 }`}
                 data-tag={props.tag}
@@ -29,11 +29,15 @@ function ButtonFollow(props: Props) {
                 data-addurl={props.addUrl ?? '/add-interest'}
                 data-deleteurl={props.removeUrl ?? '/delete-interest'}
             >
-                <span className={styles.cross} />{' '}
-                <span className={`${styles.buttonText} ${styles.defaultText}`}>
+                <span className={styles['cross']} />{' '}
+                <span
+                    className={`${styles['buttonText']} ${styles['defaultText']}`}
+                >
                     {props.addText ?? 'Volg'}
                 </span>
-                <span className={`${styles.buttonText} ${styles.activeText}`}>
+                <span
+                    className={`${styles['buttonText']} ${styles['activeText']}`}
+                >
                     {props.removeText ?? 'Ontvolg'}
                 </span>
             </button>
@@ -42,7 +46,7 @@ function ButtonFollow(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdFollowButton];
+    return [styles['fdFollowButton']];
 }
 
 export { ButtonFollow, getCssClassNames };
diff --git a/src/components/button/ButtonGhost.tsx b/src/components/button/ButtonGhost.tsx
index a622accc..abd48c47 100644
--- a/src/components/button/ButtonGhost.tsx
+++ b/src/components/button/ButtonGhost.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ButtonGhost.module.scss';
+import * as styles from './ButtonGhost.module.scss';
 
 type Sizes = 's' | 'm';
 
@@ -17,12 +17,12 @@ interface Props {
  * @param props
  */
 function ButtonGhost(props: Props) {
-    const sizeClass = props.size === 'm' ? styles.m : '';
+    const sizeClass = props.size === 'm' ? styles['m'] : '';
 
     return (
         <button
             {...props}
-            className={`${styles.fdButtonGhost} ${sizeClass}${
+            className={`${styles['fdButtonGhost']} ${sizeClass}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
@@ -32,7 +32,7 @@ function ButtonGhost(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdButtonGhost];
+    return [styles['fdButtonGhost']];
 }
 
 export { ButtonGhost, getCssClassNames };
diff --git a/src/components/button/Dropdown.tsx b/src/components/button/Dropdown.tsx
index ab3d3bc5..fcbe4d78 100644
--- a/src/components/button/Dropdown.tsx
+++ b/src/components/button/Dropdown.tsx
@@ -7,7 +7,7 @@ import {
     GooglePodcastsIcon,
     SpotifyIcon,
 } from '../../design-tokens/icons';
-import styles from './Dropdown.module.scss';
+import * as styles from './Dropdown.module.scss';
 
 type Sizes = 's' | 'm';
 
@@ -31,7 +31,7 @@ interface Props {
 function Dropdown(props: Props) {
     const buttonRef = useRef();
     const [expanded, setExpanded] = useState(false);
-    const sizeClass = props.size === 'm' ? styles.m : '';
+    const sizeClass = props.size === 'm' ? styles['m'] : '';
 
     useEffect(() => {
         if (buttonRef.current) {
diff --git a/src/components/card/HorizontalCard1.tsx b/src/components/card/HorizontalCard1.tsx
index 0c842900..7a0d666e 100644
--- a/src/components/card/HorizontalCard1.tsx
+++ b/src/components/card/HorizontalCard1.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HorizontalCard1.module.scss';
+import * as styles from './HorizontalCard1.module.scss';
 
 interface Props {
     id: string;
@@ -24,9 +24,9 @@ function HorizontalCard1(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.horizontalCard1}${
+            className={`${styles['horizontalCard1']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''} xs__p+4`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''} xs__p+4`}
             id={props.id}
         >
             <a href={props.url} aria-label={props.title}>
@@ -45,28 +45,30 @@ function HorizontalCard1(props: Props) {
                 )}
 
                 {!props.imageUrl && !props.imageComponent && (
-                    <div className={`${styles.figure} ${styles.empty} xs__m-0`}>
+                    <div
+                        className={`${styles['figure']} ${styles['empty']} xs__m-0`}
+                    >
                         <img src="/assets/images/fd-logo.svg" alt="FD-Logo" />
                     </div>
                 )}
 
-                <div className={`${styles.teaserText} xs__pl+4 s__p+4`}>
+                <div className={`${styles['teaserText']} xs__pl+4 s__p+4`}>
                     <div
-                        className={`${styles.meta} xs__m-0 xs__mb+2 body-text sans xs`}
+                        className={`${styles['meta']} xs__m-0 xs__mb+2 body-text sans xs`}
                     >
                         <time>{props.time}</time>
 
                         {props.label && (
                             <>
-                                <span className={styles.dot}>•</span>
-                                <span className={styles.prefix}>
+                                <span className={styles['dot']}>•</span>
+                                <span className={styles['prefix']}>
                                     {props.label}
                                 </span>
                             </>
                         )}
                     </div>
 
-                    <div className={styles.textContainer}>
+                    <div className={styles['textContainer']}>
                         <h1 className="heading serif s xs__m-0">
                             {props.title}
                         </h1>
@@ -78,7 +80,7 @@ function HorizontalCard1(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.horizontalCard1];
+    return [styles['horizontalCard1']];
 }
 
 export { HorizontalCard1, getCssClassNames };
diff --git a/src/components/card/HorizontalCard2.tsx b/src/components/card/HorizontalCard2.tsx
index f56180e9..2132ea52 100644
--- a/src/components/card/HorizontalCard2.tsx
+++ b/src/components/card/HorizontalCard2.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HorizontalCard2.module.scss';
+import * as styles from './HorizontalCard2.module.scss';
 
 interface Props {
     style?: React.CSSProperties;
@@ -21,34 +21,34 @@ function HorizontalCard2(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.horizontalCard2}${
+            className={`${styles['horizontalCard2']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''}`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''}`}
             id={props.id}
         >
             <a className="xs__p+4" href={props.url} aria-label={props.title}>
-                <div className={`${styles.teaserText} xs__pl+4 s__p+4`}>
+                <div className={`${styles['teaserText']} xs__pl+4 s__p+4`}>
                     <div
-                        className={`${styles.meta} xs__m-0 xs__mb+2 body-text sans xs`}
+                        className={`${styles['meta']} xs__m-0 xs__mb+2 body-text sans xs`}
                     >
                         <time>{props.time}</time>
 
                         {props.label && (
                             <>
-                                <span className={styles.dot}>•</span>
-                                <span className={styles.prefix}>
+                                <span className={styles['dot']}>•</span>
+                                <span className={styles['prefix']}>
                                     {props.label}
                                 </span>
                             </>
                         )}
                     </div>
 
-                    <div className={styles.textContainer}>
+                    <div className={styles['textContainer']}>
                         <h1 className="heading serif s xs__m-0">
                             {props.title}
                         </h1>
                         <p
-                            className={`${styles.intro} body-text sans s xs__m-0 xs__mt+1`}
+                            className={`${styles['intro']} body-text sans s xs__m-0 xs__mt+1`}
                         >
                             {props.intro}
                         </p>
@@ -60,7 +60,7 @@ function HorizontalCard2(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.horizontalCard2];
+    return [styles['horizontalCard2']];
 }
 
 export { HorizontalCard2, getCssClassNames };
diff --git a/src/components/card/HorizontalCard3.tsx b/src/components/card/HorizontalCard3.tsx
index 1b86e62c..00d51554 100644
--- a/src/components/card/HorizontalCard3.tsx
+++ b/src/components/card/HorizontalCard3.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import styles from './HorizontalCard3.module.scss';
+import * as styles from './HorizontalCard3.module.scss';
 
 interface Props {
     id: string;
@@ -22,9 +22,9 @@ interface Props {
 function HorizontalCard3(props: Props) {
     return (
         <article
-            className={`${styles.horizontalCard3}${
+            className={`${styles['horizontalCard3']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''} xs__p+4`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''} xs__p+4`}
             id={props.id}
         >
             <a href={props.url} aria-label={props.title}>
@@ -43,12 +43,14 @@ function HorizontalCard3(props: Props) {
                 )}
 
                 {!props.imageUrl && !props.imageComponent && (
-                    <div className={`${styles.figure} ${styles.empty} xs__m-0`}>
+                    <div
+                        className={`${styles['figure']} ${styles['empty']} xs__m-0`}
+                    >
                         <img src="/assets/images/fd-logo.svg" alt="FD-Logo" />
                     </div>
                 )}
 
-                <div className={`${styles.teaserText} xs__pl+4 s__p+4`}>
+                <div className={`${styles['teaserText']} xs__pl+4 s__p+4`}>
                     <h1 className="heading serif xs xs__m-0">{props.title}</h1>
                 </div>
             </a>
@@ -57,7 +59,7 @@ function HorizontalCard3(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.horizontalCard3];
+    return [styles['horizontalCard3']];
 }
 
 export { HorizontalCard3, getCssClassNames };
diff --git a/src/components/card/HorizontalCard4.tsx b/src/components/card/HorizontalCard4.tsx
index 7326c8bd..3f53cb16 100644
--- a/src/components/card/HorizontalCard4.tsx
+++ b/src/components/card/HorizontalCard4.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HorizontalCard4.module.scss';
+import * as styles from './HorizontalCard4.module.scss';
 
 interface Props {
     style?: React.CSSProperties;
@@ -26,9 +26,9 @@ function HorizontalCard4(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.fdHorizontalCard4}${
+            className={`${styles['fdHorizontalCard4']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''} xs__p+4`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''} xs__p+4`}
             id={props.id}
         >
             <a href={props.url} aria-label={props.title}>
@@ -45,28 +45,30 @@ function HorizontalCard4(props: Props) {
                 )}
 
                 {!props.imageUrl && !props.imageComponent && (
-                    <div className={`${styles.figure} ${styles.empty} xs__m-0`}>
+                    <div
+                        className={`${styles['figure']} ${styles['empty']} xs__m-0`}
+                    >
                         <img src="/assets/images/fd-logo.svg" alt="FD-Logo" />
                     </div>
                 )}
 
-                <div className={`${styles.teaserText} xs__pl+4 s__p+4`}>
+                <div className={`${styles['teaserText']} xs__pl+4 s__p+4`}>
                     <div
-                        className={`${styles.meta} xs__m-0 xs__mb+2 body-text sans xs`}
+                        className={`${styles['meta']} xs__m-0 xs__mb+2 body-text sans xs`}
                     >
                         <time>{props.time}</time>
 
                         {props.label && (
                             <>
-                                <span className={styles.dot}>•</span>
-                                <span className={styles.prefix}>
+                                <span className={styles['dot']}>•</span>
+                                <span className={styles['prefix']}>
                                     {props.label}
                                 </span>
                             </>
                         )}
                     </div>
 
-                    <div className={styles.textContainer}>
+                    <div className={styles['textContainer']}>
                         <h1 className="heading serif s xs__m-0">
                             {props.title}
                         </h1>
@@ -78,7 +80,7 @@ function HorizontalCard4(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdHorizontalCard4];
+    return [styles['fdHorizontalCard4']];
 }
 
 export { HorizontalCard4, getCssClassNames };
diff --git a/src/components/card/HybridCard1.tsx b/src/components/card/HybridCard1.tsx
index 51403bd1..9e143c6b 100644
--- a/src/components/card/HybridCard1.tsx
+++ b/src/components/card/HybridCard1.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HybridCard1.module.scss';
+import * as styles from './HybridCard1.module.scss';
 
 export type Variants = 'default' | 'variant-1';
 
@@ -31,9 +31,9 @@ function HybridCard1(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.hybridCard1}${
+            className={`${styles['hybridCard1']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''} xs__p+4 s__p-0`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''} xs__p+4 s__p-0`}
             id={props.id}
         >
             <a
@@ -72,13 +72,13 @@ function HybridCard1(props: Props) {
                 )}
 
                 <div
-                    className={`${styles.teaserText}  xs__pl+4 s__pr-0 s__pb-0 s__pl-0`}
+                    className={`${styles['teaserText']}  xs__pl+4 s__pr-0 s__pb-0 s__pl-0`}
                 >
                     {props.label && (
                         <div
-                            className={`${styles.meta} xs__mb+2 body-text sans xs`}
+                            className={`${styles['meta']} xs__mb+2 body-text sans xs`}
                         >
-                            <span className={styles.prefix}>
+                            <span className={styles['prefix']}>
                                 {props.readingTime && (
                                     <span className={styles['reading-time']}>
                                         {props.readingTime} min leestijd •{' '}
@@ -90,9 +90,9 @@ function HybridCard1(props: Props) {
                     )}
                     {!props.label && props.readingTime && (
                         <div
-                            className={`${styles.meta} xs__mb+2 body-text sans xs`}
+                            className={`${styles['meta']} xs__mb+2 body-text sans xs`}
                         >
-                            <span className={styles.prefix}>
+                            <span className={styles['prefix']}>
                                 <span className={styles['reading-time']}>
                                     {props.readingTime} min leestijd
                                 </span>
@@ -100,14 +100,14 @@ function HybridCard1(props: Props) {
                         </div>
                     )}
 
-                    <div className={styles.textContainer}>
+                    <div className={styles['textContainer']}>
                         <h1 className="heading serif xs xs__m-0">
                             {props.title}
                         </h1>
 
                         {props.intro && (
                             <p
-                                className={`${styles.intro} body-text sans s xs__m-0 xs__mt+2`}
+                                className={`${styles['intro']} body-text sans s xs__m-0 xs__mt+2`}
                             >
                                 {props.intro}
                             </p>
@@ -120,7 +120,7 @@ function HybridCard1(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.hybridCard1];
+    return [styles['hybridCard1']];
 }
 
 export { HybridCard1, getCssClassNames };
diff --git a/src/components/card/HybridCard2.tsx b/src/components/card/HybridCard2.tsx
index efe4a17a..8278be8e 100644
--- a/src/components/card/HybridCard2.tsx
+++ b/src/components/card/HybridCard2.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HybridCard2.module.scss';
+import * as styles from './HybridCard2.module.scss';
 
 export type Variants = 'default' | 'variant-1';
 
@@ -29,9 +29,9 @@ function HybridCard2(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.hybridCard2}${
+            className={`${styles['hybridCard2']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''}`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''}`}
             id={props.id}
         >
             <a className="xs__p+4" href={props.url} aria-label={props.title}>
@@ -66,13 +66,13 @@ function HybridCard2(props: Props) {
                 )}
 
                 <div
-                    className={`${styles.teaserText} xs__pl+4 s__pr-0 s__pb-0 s__pl-0`}
+                    className={`${styles['teaserText']} xs__pl+4 s__pr-0 s__pb-0 s__pl-0`}
                 >
                     {props.label && (
                         <div
-                            className={`${styles.meta} xs__mb+2 body-text sans xs`}
+                            className={`${styles['meta']} xs__mb+2 body-text sans xs`}
                         >
-                            <span className={styles.prefix}>
+                            <span className={styles['prefix']}>
                                 {props.readingTime && (
                                     <span className={styles['reading-time']}>
                                         {props.readingTime} min leestijd •{' '}
@@ -84,9 +84,9 @@ function HybridCard2(props: Props) {
                     )}
                     {!props.label && props.readingTime && (
                         <div
-                            className={`${styles.meta} xs__mb+2 body-text sans xs`}
+                            className={`${styles['meta']} xs__mb+2 body-text sans xs`}
                         >
-                            <span className={styles.prefix}>
+                            <span className={styles['prefix']}>
                                 <span className={styles['reading-time']}>
                                     {props.readingTime} min leestijd
                                 </span>
@@ -94,7 +94,7 @@ function HybridCard2(props: Props) {
                         </div>
                     )}
 
-                    <div className={styles.textContainer}>
+                    <div className={styles['textContainer']}>
                         <h1 className="heading serif xs xs__m-0">
                             {props.title}
                         </h1>
@@ -106,7 +106,7 @@ function HybridCard2(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.hybridCard2];
+    return [styles['hybridCard2']];
 }
 
 export { HybridCard2, getCssClassNames };
diff --git a/src/components/card/HybridCard4.tsx b/src/components/card/HybridCard4.tsx
index e17dde9b..3f3767fd 100644
--- a/src/components/card/HybridCard4.tsx
+++ b/src/components/card/HybridCard4.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HybridCard4.module.scss';
+import * as styles from './HybridCard4.module.scss';
 
 interface Props {
     style?: React.CSSProperties;
@@ -22,7 +22,7 @@ function HybridCard4(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.hybridCard4}${
+            className={`${styles['hybridCard4']}${
                 props.className ? ` ${props.className}` : ''
             } xs__p+4 s__p-0`}
             id={props.id}
@@ -40,12 +40,16 @@ function HybridCard4(props: Props) {
                     </figure>
                 )}
                 {!props.imageUrl && !props.imageComponent && (
-                    <div className={`${styles.figure} ${styles.empty} xs__m-0`}>
+                    <div
+                        className={`${styles['figure']} ${styles['empty']} xs__m-0`}
+                    >
                         <img src="/assets/images/fd-logo.svg" alt="FD-Logo" />
                     </div>
                 )}
 
-                <div className={`${styles.teaserText} xs__pl+4 s__p+4 m__p+4`}>
+                <div
+                    className={`${styles['teaserText']} xs__pl+4 s__p+4 m__p+4`}
+                >
                     {props.label && (
                         <span className={`xs__mb+2  body-text sans xs`}>
                             {props.readingTime && (
@@ -72,7 +76,7 @@ function HybridCard4(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.hybridCard4];
+    return [styles['hybridCard4']];
 }
 
 export { HybridCard4, getCssClassNames };
diff --git a/src/components/card/LinkCard.tsx b/src/components/card/LinkCard.tsx
index 7452e3a9..8acb4804 100644
--- a/src/components/card/LinkCard.tsx
+++ b/src/components/card/LinkCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './LinkCard.module.scss';
+import * as styles from './LinkCard.module.scss';
 import { ChevronRightIcon } from '../../design-tokens/icons';
 
 export interface Props {
@@ -13,7 +13,7 @@ export default function LinkCard(props: Props) {
     return (
         <>
             <div
-                className={`${styles.linkCard}${
+                className={`${styles['linkCard']}${
                     props.className ? ` ${props.className}` : ''
                 }`}
             >
@@ -25,7 +25,7 @@ export default function LinkCard(props: Props) {
                     }
                 >
                     {props.linkText ?? 'Beheer uw nieuwsbriefinstellingen'}{' '}
-                    <span className={styles.icon}>
+                    <span className={styles['icon']}>
                         <ChevronRightIcon />
                     </span>
                 </a>
@@ -35,7 +35,7 @@ export default function LinkCard(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.linkCard];
+    return [styles['linkCard']];
 }
 
 export { LinkCard, getCssClassNames };
diff --git a/src/components/card/VerticalCard1.tsx b/src/components/card/VerticalCard1.tsx
index 4ae262bc..105f5115 100644
--- a/src/components/card/VerticalCard1.tsx
+++ b/src/components/card/VerticalCard1.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './VerticalCard1.module.scss';
+import * as styles from './VerticalCard1.module.scss';
 
 interface Props {
     style?: React.CSSProperties;
@@ -26,9 +26,9 @@ function VerticalCard1(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.verticalCard1}${
+            className={`${styles['verticalCard1']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''}`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''}`}
             id={props.id}
             aria-label={props.title}
         >
@@ -65,12 +65,12 @@ function VerticalCard1(props: Props) {
                     <figcaption>{props.caption}</figcaption>
                 </figure>
 
-                <div className={styles.teaserText}>
+                <div className={styles['teaserText']}>
                     {props.label && (
                         <div
-                            className={`${styles.meta} xs__mb+2 body-text sans xs`}
+                            className={`${styles['meta']} xs__mb+2 body-text sans xs`}
                         >
-                            <span className={styles.prefix}>
+                            <span className={styles['prefix']}>
                                 {props.readingTime && (
                                     <span className={styles['reading-time']}>
                                         {props.readingTime} min leestijd •{' '}
@@ -82,9 +82,9 @@ function VerticalCard1(props: Props) {
                     )}
                     {!props.label && props.readingTime && (
                         <div
-                            className={`${styles.meta} xs__mb+2 body-text sans xs`}
+                            className={`${styles['meta']} xs__mb+2 body-text sans xs`}
                         >
-                            <span className={styles.prefix}>
+                            <span className={styles['prefix']}>
                                 <span className={styles['reading-time']}>
                                     {props.readingTime} min leestijd
                                 </span>
@@ -97,7 +97,7 @@ function VerticalCard1(props: Props) {
                             {props.title}
                         </h1>
                         <p
-                            className={`${styles.intro} body-text sans s xs__m-0 xs__mt+2`}
+                            className={`${styles['intro']} body-text sans s xs__m-0 xs__mt+2`}
                         >
                             {props.intro}
                         </p>
@@ -109,7 +109,7 @@ function VerticalCard1(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.verticalCard1];
+    return [styles['verticalCard1']];
 }
 
 export { VerticalCard1, getCssClassNames };
diff --git a/src/components/card/VerticalCard2.tsx b/src/components/card/VerticalCard2.tsx
index e844f811..673be1d4 100644
--- a/src/components/card/VerticalCard2.tsx
+++ b/src/components/card/VerticalCard2.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './VerticalCard2.module.scss';
+import * as styles from './VerticalCard2.module.scss';
 
 interface Props {
     style?: React.CSSProperties;
@@ -74,7 +74,7 @@ function VerticalCard2(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.verticalCard2];
+    return [styles['verticalCard2']];
 }
 
 export { VerticalCard2, getCssClassNames };
diff --git a/src/components/card/VerticalCard5.tsx b/src/components/card/VerticalCard5.tsx
index de46f0f7..f7f6b7e3 100644
--- a/src/components/card/VerticalCard5.tsx
+++ b/src/components/card/VerticalCard5.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dropdown } from '../button/Dropdown';
-import styles from './VerticalCard5.module.scss';
+import * as styles from './VerticalCard5.module.scss';
 
 interface Props {
     id: string;
@@ -26,9 +26,9 @@ function VerticalCard5(props: Props) {
         <article
             style={props.style}
             data-variant={props.variant}
-            className={`${styles.verticalCard5}${
+            className={`${styles['verticalCard5']}${
                 props.className ? ` ${props.className}` : ''
-            }${props.isRead ? ` ${styles.isRead}` : ''}`}
+            }${props.isRead ? ` ${styles['isRead']}` : ''}`}
             id={props.id}
         >
             <a
@@ -36,7 +36,7 @@ function VerticalCard5(props: Props) {
                 aria-label={props.title}
                 className="xs__p+4 l__p+6 "
             >
-                <div className={styles.cardContent}>
+                <div className={styles['cardContent']}>
                     <div className="xs__m-0-auto xs__mb+4 l__mb+6">
                         <figure className="xs__m-0">
                             <picture>
@@ -66,15 +66,15 @@ function VerticalCard5(props: Props) {
                             <figcaption>{props.caption}</figcaption>
                         </figure>
                     </div>
-                    <div className={styles.textContent}>
-                        <div className={styles.teaserText}>
+                    <div className={styles['textContent']}>
+                        <div className={styles['teaserText']}>
                             <h1 className="heading serif s xs__m-0">
                                 {props.title}
                             </h1>
 
-                            {styles.intro ? (
+                            {styles['intro'] ? (
                                 <p
-                                    className={`${styles.intro} body-text sans s xs__mt+2 l__mt+4`}
+                                    className={`${styles['intro']} body-text sans s xs__mt+2 l__mt+4`}
                                 >
                                     {props.intro}
                                 </p>
@@ -93,7 +93,7 @@ function VerticalCard5(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.verticalCard5];
+    return [styles['verticalCard5']];
 }
 
 export { VerticalCard5, getCssClassNames };
diff --git a/src/components/card/VerticalCard6.tsx b/src/components/card/VerticalCard6.tsx
index ef5885c7..ffe59e95 100644
--- a/src/components/card/VerticalCard6.tsx
+++ b/src/components/card/VerticalCard6.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './VerticalCard6.module.scss';
+import * as styles from './VerticalCard6.module.scss';
 
 interface Props {
     style?: React.CSSProperties;
@@ -22,7 +22,7 @@ function VerticalCard6(props: Props) {
     return (
         <article
             style={props.style}
-            className={`${styles.verticalCard6}${
+            className={`${styles['verticalCard6']}${
                 props.className ? ` ${props.className}` : ''
             }`}
             id={props.id}
@@ -41,14 +41,14 @@ function VerticalCard6(props: Props) {
                 )}
                 {!props.imageUrl && !props.imageComponent && (
                     <div
-                        className={`${styles.figure} ${styles.empty} xs__m-0 s__mt-4 s__mb-0`}
+                        className={`${styles['figure']} ${styles['empty']} xs__m-0 s__mt-4 s__mb-0`}
                     >
                         <img src="/assets/images/fd-logo.svg" alt="FD-Logo" />
                     </div>
                 )}
 
                 <div
-                    className={`${styles.teaserText} xs__p+4 m__p-0 xs__p+2 m__p+4`}
+                    className={`${styles['teaserText']} xs__p+4 m__p-0 xs__p+2 m__p+4`}
                 >
                     {props.label && (
                         <div className={`xs__mb+2 body-text sans xs`}>
@@ -75,7 +75,7 @@ function VerticalCard6(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.verticalCard6];
+    return [styles['verticalCard6']];
 }
 
 export { VerticalCard6, getCssClassNames };
diff --git a/src/components/card/shared/Footer.tsx b/src/components/card/shared/Footer.tsx
index 79a7486a..bcfdde52 100644
--- a/src/components/card/shared/Footer.tsx
+++ b/src/components/card/shared/Footer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BookmarkIcon, BookmarkOIcon } from '../../../design-tokens/icons';
-import styles from './Footer.module.scss';
+import * as styles from './Footer.module.scss';
 
 interface Props {
     className?: string;
@@ -12,7 +12,7 @@ interface Props {
 function Footer(props: Props) {
     return (
         <footer
-            className={`${styles.footer}${
+            className={`${styles['footer']}${
                 props.className ? ` ${props.className}` : ''
             } xs__p-0 xs__pr+4 xs__pb+4 xs__pl+4`}
         >
@@ -20,7 +20,7 @@ function Footer(props: Props) {
                 <a onClick={props.onBookmark} className="xs__mt+2">
                     {props.bookmarked ? (
                         <span
-                            className={`${styles.icon}${
+                            className={`${styles['icon']}${
                                 props.iconSpanClassName
                                     ? ` ${props.iconSpanClassName}`
                                     : ''
@@ -30,7 +30,7 @@ function Footer(props: Props) {
                         </span>
                     ) : (
                         <span
-                            className={`${styles.icon}${
+                            className={`${styles['icon']}${
                                 props.iconSpanClassName
                                     ? ` ${props.iconSpanClassName}`
                                     : ''
@@ -47,7 +47,7 @@ function Footer(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.footer];
+    return [styles['footer']];
 }
 
 export { Footer, getCssClassNames };
diff --git a/src/components/cookieconsent/CookieConsent.tsx b/src/components/cookieconsent/CookieConsent.tsx
index 3ea93949..92776f50 100644
--- a/src/components/cookieconsent/CookieConsent.tsx
+++ b/src/components/cookieconsent/CookieConsent.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styles from './CookieConsent.module.scss';
+import * as styles from './CookieConsent.module.scss';
 import {
     Button,
     getCssClassNames as getButtonCssClassNames,
@@ -132,8 +132,8 @@ function CookieConsent(props: Props) {
 
     return (
         <Modal
-            className={styles.fdCookieConsent}
-            contentBoxClassName={styles.contentBoxAdjust}
+            className={styles['fdCookieConsent']}
+            contentBoxClassName={styles['contentBoxAdjust']}
             disableBackgroundClose={true}
             hideCloseButton={true}
             hideCloseIcon={true}
@@ -158,7 +158,7 @@ function CookieConsent(props: Props) {
                                 </p>
 
                                 <h3>FDMG</h3>
-                                <div className={styles.settings}>
+                                <div className={styles['settings']}>
                                     <Checkbox
                                         id={VendorNames['fdmg']}
                                         label="FDMG"
@@ -181,7 +181,7 @@ function CookieConsent(props: Props) {
                                     />
                                 </div>
                                 <h3>Derde partijen</h3>
-                                <div className={styles.settings}>
+                                <div className={styles['settings']}>
                                     <Checkbox
                                         id={VendorNames['fdmg-personalized']}
                                         label="Personalisatie"
@@ -249,13 +249,19 @@ function CookieConsent(props: Props) {
                 ]}
             />
             <footer>
-                <Button onClick={handleClose} className={styles.button}>
+                <Button onClick={handleClose} className={styles['button']}>
                     {props.closeLabel ?? 'Close'}
                 </Button>
-                <ButtonGhost onClick={handleDenyAll} className={styles.button}>
+                <ButtonGhost
+                    onClick={handleDenyAll}
+                    className={styles['button']}
+                >
                     {props.denyAllLabel ?? 'Deny all'}
                 </ButtonGhost>
-                <ButtonCta onClick={handleAcceptAll} className={styles.button}>
+                <ButtonCta
+                    onClick={handleAcceptAll}
+                    className={styles['button']}
+                >
                     {props.acceptAllLabel ?? 'Accept all'}
                 </ButtonCta>
             </footer>
@@ -265,7 +271,7 @@ function CookieConsent(props: Props) {
 
 function getCssClassNames(): string[] {
     return [
-        styles.fdCookieConsent,
+        styles['fdCookieConsent'],
         ...getLockedContentCssClassNames(),
         ...getModalCssClassNames(),
         ...getAccordionCssClassNames(),
diff --git a/src/components/cookieconsent/LockedContent.tsx b/src/components/cookieconsent/LockedContent.tsx
index ea9221c5..c4e9d555 100644
--- a/src/components/cookieconsent/LockedContent.tsx
+++ b/src/components/cookieconsent/LockedContent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import styles from './LockedContent.module.scss';
+import * as styles from './LockedContent.module.scss';
 import { SpyglassIcon } from '../../design-tokens/icons';
 import CookieConsentStore, { VendorNames } from './CookieConsentStore';
 
@@ -97,15 +97,15 @@ function LockedContent(props: Props) {
     return unlocked ? (
         <span ref={unlockedRef}>{props.children}</span>
     ) : (
-        <div className={styles.fdLockedContent}>
+        <div className={styles['fdLockedContent']}>
             <div
-                className={styles.blockedContentContainer}
+                className={styles['blockedContentContainer']}
                 tabIndex={0}
                 onClick={unlock}
                 onKeyPress={handleActivation}
             >
-                <span className={styles.lockText}>
-                    <span className={styles.lock}>
+                <span className={styles['lockText']}>
+                    <span className={styles['lock']}>
                         <SpyglassIcon />
                     </span>{' '}
                     <span>{props.lockDescription}</span>
@@ -116,7 +116,7 @@ function LockedContent(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdLockedContent];
+    return [styles['fdLockedContent']];
 }
 
 export { LockedContent, getCssClassNames };
diff --git a/src/components/financial-agenda/FinancialAgenda.tsx b/src/components/financial-agenda/FinancialAgenda.tsx
index 6a9cc147..5f615650 100644
--- a/src/components/financial-agenda/FinancialAgenda.tsx
+++ b/src/components/financial-agenda/FinancialAgenda.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './FinancialAgenda.module.scss';
+import * as styles from './FinancialAgenda.module.scss';
 
 type AgendaItem = {
     date: string;
@@ -13,7 +13,7 @@ interface Props {
 
 function FinancialAgenda(props: Props) {
     return (
-        <div className={styles.financialAgenda}>
+        <div className={styles['financialAgenda']}>
             <table>
                 <thead>
                     <tr>
@@ -54,7 +54,7 @@ function FinancialAgenda(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.financialAgenda];
+    return [styles['financialAgenda']];
 }
 
 export { FinancialAgenda, getCssClassNames };
diff --git a/src/components/footer/DarkModeToggle.tsx b/src/components/footer/DarkModeToggle.tsx
index 00f9d2eb..d6c2994d 100644
--- a/src/components/footer/DarkModeToggle.tsx
+++ b/src/components/footer/DarkModeToggle.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import ThemeStore, { Theme } from '../../stores/ThemeStore';
-import styles from './Footer.module.scss';
+import * as styles from './Footer.module.scss';
 
 export function DarkModeToggle() {
     const [theme, setTheme] = useState(ThemeStore.getTheme());
@@ -33,7 +33,7 @@ export function DarkModeToggle() {
             <label>Theme:</label>
             <button
                 className={`body-text sans xs system${
-                    theme === 'system' ? ` ${styles.active}` : ''
+                    theme === 'system' ? ` ${styles['active']}` : ''
                 }`}
                 onClick={handleThemeChange.bind(null, 'system')}
             >
@@ -42,7 +42,7 @@ export function DarkModeToggle() {
             <span>&nbsp;|&nbsp;</span>
             <button
                 className={`body-text sans xs light${
-                    theme === 'light' ? ` ${styles.active}` : ''
+                    theme === 'light' ? ` ${styles['active']}` : ''
                 }`}
                 onClick={handleThemeChange.bind(null, 'light')}
             >
@@ -51,7 +51,7 @@ export function DarkModeToggle() {
             <span>&nbsp;|&nbsp;</span>
             <button
                 className={`body-text sans xs dark${
-                    theme === 'dark' ? ` ${styles.active}` : ''
+                    theme === 'dark' ? ` ${styles['active']}` : ''
                 }`}
                 onClick={handleThemeChange.bind(null, 'dark')}
             >
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 8a9da7c4..31cdcf01 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -8,7 +8,7 @@ import {
     TwitterIcon,
 } from '../../design-tokens/icons';
 import { DarkModeToggle } from './DarkModeToggle';
-import styles from './Footer.module.scss';
+import * as styles from './Footer.module.scss';
 
 function Footer() {
     const footerRef = useRef<HTMLElement>();
@@ -82,11 +82,11 @@ function Footer() {
                             onKeyDown={handleKeyDown}
                         >
                             <span>Over FD</span>
-                            <span className={styles.icon}>
-                                <span className={styles.collapse}>
+                            <span className={styles['icon']}>
+                                <span className={styles['collapse']}>
                                     <CollapseIcon />
                                 </span>
-                                <span className={styles.expand}>
+                                <span className={styles['expand']}>
                                     <ExpandIcon />
                                 </span>
                             </span>
@@ -167,11 +167,11 @@ function Footer() {
                             onKeyDown={handleKeyDown}
                         >
                             <span>Algemeen</span>
-                            <span className={styles.icon}>
-                                <span className={styles.collapse}>
+                            <span className={styles['icon']}>
+                                <span className={styles['collapse']}>
                                     <CollapseIcon />
                                 </span>
-                                <span className={styles.expand}>
+                                <span className={styles['expand']}>
                                     <ExpandIcon />
                                 </span>
                             </span>
@@ -254,11 +254,11 @@ function Footer() {
                             onKeyDown={handleKeyDown}
                         >
                             <span>Service</span>
-                            <span className={styles.icon}>
-                                <span className={styles.collapse}>
+                            <span className={styles['icon']}>
+                                <span className={styles['collapse']}>
                                     <CollapseIcon />
                                 </span>
-                                <span className={styles.expand}>
+                                <span className={styles['expand']}>
                                     <ExpandIcon />
                                 </span>
                             </span>
@@ -337,11 +337,11 @@ function Footer() {
                             onKeyDown={handleKeyDown}
                         >
                             <span>Producten</span>
-                            <span className={styles.icon}>
-                                <span className={styles.collapse}>
+                            <span className={styles['icon']}>
+                                <span className={styles['collapse']}>
                                     <CollapseIcon />
                                 </span>
-                                <span className={styles.expand}>
+                                <span className={styles['expand']}>
                                     <ExpandIcon />
                                 </span>
                             </span>
@@ -424,11 +424,11 @@ function Footer() {
                             onKeyDown={handleKeyDown}
                         >
                             <span>Van onze partners</span>
-                            <span className={styles.icon}>
-                                <span className={styles.collapse}>
+                            <span className={styles['icon']}>
+                                <span className={styles['collapse']}>
                                     <CollapseIcon />
                                 </span>
-                                <span className={styles.expand}>
+                                <span className={styles['expand']}>
                                     <ExpandIcon />
                                 </span>
                             </span>
@@ -478,11 +478,11 @@ function Footer() {
                             onKeyDown={handleKeyDown}
                         >
                             <span>Meer van FDMG</span>
-                            <span className={styles.icon}>
-                                <span className={styles.collapse}>
+                            <span className={styles['icon']}>
+                                <span className={styles['collapse']}>
                                     <CollapseIcon />
                                 </span>
-                                <span className={styles.expand}>
+                                <span className={styles['expand']}>
                                     <ExpandIcon />
                                 </span>
                             </span>
@@ -628,7 +628,7 @@ function Footer() {
                 </li>
             </ul>
 
-            <section className={`${styles.social} xs__ml+4 xs__mr+4`}>
+            <section className={`${styles['social']} xs__ml+4 xs__mr+4`}>
                 <a
                     href="https://www.linkedin.com/company/het-financieele-dagblad"
                     data-ga-name="footer_menu_click"
@@ -637,7 +637,7 @@ function Footer() {
                     data-ga-label="https://www.linkedin.com/company/het-financieele-dagblad"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className={`${styles.icon} xs__p+4`}
+                    className={`${styles['icon']} xs__p+4`}
                 >
                     <LinkedInIcon />
                 </a>
@@ -649,7 +649,7 @@ function Footer() {
                     data-ga-label="https://twitter.com/FD_Nieuws"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className={`${styles.icon} xs__p+4`}
+                    className={`${styles['icon']} xs__p+4`}
                 >
                     <TwitterIcon />
                 </a>
@@ -661,7 +661,7 @@ function Footer() {
                     data-ga-label="https://nl-nl.facebook.com/Hetfd"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className={`${styles.icon} xs__p+4`}
+                    className={`${styles['icon']} xs__p+4`}
                 >
                     <FacebookIcon />
                 </a>
@@ -673,7 +673,7 @@ function Footer() {
                     data-ga-label="https://www.instagram.com/financieeledagblad/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className={`${styles.icon} xs__p+4`}
+                    className={`${styles['icon']} xs__p+4`}
                 >
                     <InstagramIcon />
                 </a>
diff --git a/src/components/infographic/Infographic.tsx b/src/components/infographic/Infographic.tsx
index ed9d7e9d..6250dfa0 100644
--- a/src/components/infographic/Infographic.tsx
+++ b/src/components/infographic/Infographic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Infographic.module.scss';
+import * as styles from './Infographic.module.scss';
 
 interface Props {
     height?: string;
@@ -9,7 +9,7 @@ interface Props {
 function Infographic(props: Props) {
     return (
         <iframe
-            className={styles.infographic}
+            className={styles['infographic']}
             src={props.src}
             height={props.height ?? 500}
         />
@@ -17,7 +17,7 @@ function Infographic(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.youtube];
+    return [styles['youtube']];
 }
 
 export { Infographic, getCssClassNames };
diff --git a/src/components/input/BreakingSwitch.tsx b/src/components/input/BreakingSwitch.tsx
index 6b3c1773..8502feb8 100644
--- a/src/components/input/BreakingSwitch.tsx
+++ b/src/components/input/BreakingSwitch.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './BreakingSwitch.module.scss';
+import * as styles from './BreakingSwitch.module.scss';
 import { CheckIcon, CloseIcon } from '../../design-tokens/icons';
 
 export interface Props {
@@ -16,19 +16,19 @@ export default function BreakingSwitch(props: Props) {
     return (
         <>
             <div
-                className={`${styles.breakingSwitch}${
+                className={`${styles['breakingSwitch']}${
                     props.className ? ` ${props.className}` : ''
                 }`}
             >
                 <h3>{props.label ? props.label : 'Breaking nieuws alert'}</h3>
-                <div className={styles.content}>
-                    <span className={styles.description}>
+                <div className={styles['content']}>
+                    <span className={styles['description']}>
                         {props.description
                             ? props.description
                             : 'Ontvang een e-mail alert bij belangrijk FD Nieuws'}
                     </span>
                     <label
-                        className={styles.switch}
+                        className={styles['switch']}
                         data-addurl={
                             props.subscribeUrl
                                 ? props.subscribeUrl
@@ -42,7 +42,7 @@ export default function BreakingSwitch(props: Props) {
                     >
                         <input
                             type="checkbox"
-                            className={styles.switchInput}
+                            className={styles['switchInput']}
                             onChange={props.onChange}
                             checked={props.checked}
                             aria-label={
@@ -51,15 +51,15 @@ export default function BreakingSwitch(props: Props) {
                                     : 'Ontvang een e-mail alert bij belangrijk FD Nieuws'
                             }
                         />
-                        <span className={styles.switchLabel}>
-                            <span className={styles.iconCheck}>
+                        <span className={styles['switchLabel']}>
+                            <span className={styles['iconCheck']}>
                                 <CheckIcon />
                             </span>
-                            <span className={styles.iconTimes}>
+                            <span className={styles['iconTimes']}>
                                 <CloseIcon />
                             </span>
                         </span>
-                        <span className={styles.switchHandle} />
+                        <span className={styles['switchHandle']} />
                     </label>
                 </div>
             </div>
@@ -68,7 +68,7 @@ export default function BreakingSwitch(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.breakingSwitch];
+    return [styles['breakingSwitch']];
 }
 
 export { BreakingSwitch, getCssClassNames };
diff --git a/src/components/input/Checkbox.tsx b/src/components/input/Checkbox.tsx
index 7b1d3948..7f16191a 100644
--- a/src/components/input/Checkbox.tsx
+++ b/src/components/input/Checkbox.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Checkbox.module.scss';
+import * as styles from './Checkbox.module.scss';
 
 export interface Props {
     /**
@@ -38,7 +38,7 @@ export interface Props {
 export default function Checkbox(props: Props) {
     return (
         <label
-            className={`${styles.fdCheckbox}${
+            className={`${styles['fdCheckbox']}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
@@ -51,13 +51,13 @@ export default function Checkbox(props: Props) {
                 defaultChecked={props.defaultChecked}
                 aria-label={props.label}
             />
-            <span className={styles.checkbox}>{props.label}</span>
+            <span className={styles['checkbox']}>{props.label}</span>
         </label>
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdCheckbox];
+    return [styles['fdCheckbox']];
 }
 
 export { Checkbox, getCssClassNames };
diff --git a/src/components/input/Radio.tsx b/src/components/input/Radio.tsx
index 7c5aa0aa..2525c4ee 100644
--- a/src/components/input/Radio.tsx
+++ b/src/components/input/Radio.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Radio.module.scss';
+import * as styles from './Radio.module.scss';
 
 export interface Props {
     /**
@@ -42,7 +42,7 @@ function Radio(props: Props) {
 
     return (
         <label
-            className={`${styles.fdRadio}${className ? ` ${className}` : ''}`}
+            className={`${styles['fdRadio']}${className ? ` ${className}` : ''}`}
         >
             <input
                 {...rest}
@@ -53,13 +53,13 @@ function Radio(props: Props) {
                 defaultChecked={defaultChecked}
                 aria-label={label}
             />
-            <span className={styles.radio}>{label}</span>
+            <span className={styles['radio']}>{label}</span>
         </label>
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdRadio];
+    return [styles['fdRadio']];
 }
 
 export { Radio, getCssClassNames };
diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
index 2ce602d5..b19eaf85 100644
--- a/src/components/input/Select.tsx
+++ b/src/components/input/Select.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styles from './Select.module.scss';
+import * as styles from './Select.module.scss';
 import { CheckIcon, DownThinIcon } from '../../design-tokens/icons';
 
 declare let localStorage: any;
@@ -125,11 +125,11 @@ function Select(props: Props) {
 
     return (
         <div
-            className={`${styles.fdSelect}${
+            className={`${styles['fdSelect']}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
-            <div className={styles.select}>
+            <div className={styles['select']}>
                 <select
                     {...props}
                     id={props.id}
@@ -148,28 +148,30 @@ function Select(props: Props) {
                 </select>
                 <div>
                     <label htmlFor={props.id}>{props.label ?? 'Value'}</label>
-                    <span className={styles.iconCheck}>
+                    <span className={styles['iconCheck']}>
                         <CheckIcon />
                     </span>
-                    <label htmlFor={props.id} className={styles.arrow}>
+                    <label htmlFor={props.id} className={styles['arrow']}>
                         <DownThinIcon />
                     </label>
                 </div>
                 {props.type !== 'date' && props.type !== 'datetime' ? (
                     <div
-                        className={`${styles.selectMessage} ${styles.errorMessage}`}
+                        className={`${styles['selectMessage']} ${styles['errorMessage']}`}
                     >
                         {props.errorMessage}
                     </div>
                 ) : null}
-                <div className={styles.selectMessage}>{props.description}</div>
+                <div className={styles['selectMessage']}>
+                    {props.description}
+                </div>
             </div>
         </div>
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdSelect];
+    return [styles['fdSelect']];
 }
 
 export { Select, getCssClassNames };
diff --git a/src/components/input/Switch.tsx b/src/components/input/Switch.tsx
index 418dddd8..37c89d6c 100644
--- a/src/components/input/Switch.tsx
+++ b/src/components/input/Switch.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Switch.module.scss';
+import * as styles from './Switch.module.scss';
 
 export interface Props {
     /**
@@ -41,7 +41,7 @@ function Switch(props: Props) {
 
     return (
         <div
-            className={`${styles.fdInputSwitch}${
+            className={`${styles['fdInputSwitch']}${
                 className ? ` ${className}` : ''
             }`}
         >
@@ -55,15 +55,15 @@ function Switch(props: Props) {
                     defaultChecked={defaultChecked}
                     aria-label={label}
                 />
-                <span className={styles.switch} />
-                <span className={styles.switchLabel}>{label}</span>
+                <span className={styles['switch']} />
+                <span className={styles['switchLabel']}>{label}</span>
             </label>
         </div>
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdInputSwitch];
+    return [styles['fdInputSwitch']];
 }
 
 export { Switch, getCssClassNames };
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 2cdfdeed..b6b6ff27 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styles from './TextArea.module.scss';
+import * as styles from './TextArea.module.scss';
 import { wordCount } from '../../utils/words';
 import { CheckIcon } from '../../design-tokens/icons';
 declare let localStorage: any;
@@ -155,11 +155,11 @@ function TextArea(props: Props) {
 
     return (
         <div
-            className={`${styles.fdTextArea}${
+            className={`${styles['fdTextArea']}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
-            <div className={styles.textArea}>
+            <div className={styles['textArea']}>
                 <textarea
                     {...props}
                     data-show-error={showMaxWordsError}
@@ -182,16 +182,16 @@ function TextArea(props: Props) {
                 />
                 <div>
                     <label htmlFor={props.id}>{props.label ?? 'Value'}</label>
-                    <span className={styles.iconCheck}>
+                    <span className={styles['iconCheck']}>
                         <CheckIcon />
                     </span>
                 </div>
                 <div
-                    className={`${styles.textareaMessage} ${styles.errorMessage}`}
+                    className={`${styles['textareaMessage']} ${styles['errorMessage']}`}
                 >
                     {errorMessage}
                 </div>
-                <div className={styles.textareaMessage}>
+                <div className={styles['textareaMessage']}>
                     {props.description}
                 </div>
             </div>
@@ -200,7 +200,7 @@ function TextArea(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdTextArea];
+    return [styles['fdTextArea']];
 }
 
 export { TextArea, getCssClassNames };
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index e18c15d6..378cd0a6 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styles from './TextInput.module.scss';
+import * as styles from './TextInput.module.scss';
 import { CheckIcon } from '../../design-tokens/icons';
 
 declare let localStorage: any;
@@ -192,11 +192,11 @@ function TextInput(props: Props) {
 
     return (
         <div
-            className={`${styles.fdInput}${
+            className={`${styles['fdInput']}${
                 props.className ? ` ${props.className}` : ''
             }`}
         >
-            <div className={styles.input}>
+            <div className={styles['input']}>
                 <input
                     {...props}
                     id={props.id}
@@ -221,25 +221,27 @@ function TextInput(props: Props) {
                 />
                 <div>
                     <label htmlFor={props.id}>{props.label ?? 'Value'}</label>
-                    <span className={styles.iconCheck}>
+                    <span className={styles['iconCheck']}>
                         <CheckIcon />
                     </span>
                 </div>
                 {props.type !== 'date' && props.type !== 'datetime' ? (
                     <div
-                        className={`${styles.inputMessage} ${styles.errorMessage}`}
+                        className={`${styles['inputMessage']} ${styles['errorMessage']}`}
                     >
                         {props.errorMessage}
                     </div>
                 ) : null}
-                <div className={styles.inputMessage}>{props.description}</div>
+                <div className={styles['inputMessage']}>
+                    {props.description}
+                </div>
             </div>
         </div>
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.fdInput];
+    return [styles['fdInput']];
 }
 
 export { TextInput, getCssClassNames };
diff --git a/src/components/menu/Aside.tsx b/src/components/menu/Aside.tsx
index bc168cc3..75acdbda 100644
--- a/src/components/menu/Aside.tsx
+++ b/src/components/menu/Aside.tsx
@@ -1,4 +1,4 @@
-import styles from './Menu.module.scss';
+import * as styles from './Menu.module.scss';
 import {
     ClockIcon,
     CloseIcon,
@@ -64,7 +64,7 @@ function Aside(props: Props) {
 
                 <li>
                     <form
-                        className={`${styles.search} xs__m+4`}
+                        className={`${styles['search']} xs__m+4`}
                         action="/search"
                         onSubmit={handleSearch}
                     >
@@ -91,7 +91,7 @@ function Aside(props: Props) {
                         data-ga-action="menu click"
                         data-ga-label="https://fd.nl/mijn-nieuws"
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <HeartOIcon />
                         </span>
                         <span
@@ -111,7 +111,7 @@ function Aside(props: Props) {
                         data-ga-action="menu click"
                         data-ga-label="https://fd.nl/net-binnen"
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <ClockIcon />
                         </span>
                         <span
@@ -133,12 +133,12 @@ function Aside(props: Props) {
                         onClick={handleToggle.bind(null, 'beurs')}
                     >
                         <span
-                            className={`${styles.icon} ${styles['collapsed-icon']}`}
+                            className={`${styles['icon']} ${styles['collapsed-icon']}`}
                         >
                             <GraphOIcon />
                         </span>
                         <span
-                            className={`${styles.icon} ${styles['expanded-icon']}`}
+                            className={`${styles['icon']} ${styles['expanded-icon']}`}
                         >
                             <GraphIcon />
                         </span>
@@ -319,7 +319,7 @@ function Aside(props: Props) {
                         data-ga-action="menu click"
                         data-ga-label="https://fd.nl/krant"
                     >
-                        <span className={styles.icon}>
+                        <span className={styles['icon']}>
                             <EditionsIcon />
                         </span>
                         <span
@@ -339,7 +339,7 @@ function Aside(props: Props) {
                     <ul className="xs__p-0  xs__p+4">
                         <li className=" xs__mb+4">
                             <h3
-                                className={`heading sans xxs xs__m-0 ${styles.label}`}
+                                className={`heading sans xxs xs__m-0 ${styles['label']}`}
                             >
                                 SECTIES
                             </h3>
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 988a455e..3de4081b 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styles from './Menu.module.scss';
-import buttonStyles from './MenuButton.module.scss';
+import * as styles from './Menu.module.scss';
+import * as buttonStyles from './MenuButton.module.scss';
 import {
     CloseIcon,
     GithubIcon,
@@ -188,7 +188,7 @@ function Menu(props: Props) {
         <div
             ref={menuRef}
             className={`${styles['header-placeholder']}${
-                stickyState ? ` ${styles.stickied}` : ''
+                stickyState ? ` ${styles['stickied']}` : ''
             }${props.className ? ` ${props.className}` : ''}`}
         >
             <header
@@ -203,7 +203,7 @@ function Menu(props: Props) {
                         <ul
                             className={`${styles['left-menu']} xs__p-0 xs__m-0`}
                         >
-                            <li className={showAside ? styles.expanded : ''}>
+                            <li className={showAside ? styles['expanded'] : ''}>
                                 <button
                                     className={`${styles['aside-menu-button']} ${styles['menu-button']} ${styles['main-link']}`}
                                     data-ga-name="menu_click"
@@ -236,7 +236,7 @@ function Menu(props: Props) {
                                     aria-label="Home"
                                     title="Home"
                                 >
-                                    <span className={styles.logo} />
+                                    <span className={styles['logo']} />
                                     <span className={styles['aria-label']}>
                                         Home
                                     </span>
@@ -285,7 +285,7 @@ function Menu(props: Props) {
                             <li
                                 className={`${
                                     styles['show-profile-highlight']
-                                } ${showProfile ? styles.expanded : ''}`}
+                                } ${showProfile ? styles['expanded'] : ''}`}
                             >
                                 <button
                                     className={`${styles['profile-button']} ${styles['menu-button']}`}
@@ -321,7 +321,7 @@ function Menu(props: Props) {
                             <li
                                 className={`${
                                     styles['show-search-highlight']
-                                } ${showSearchBar ? styles.expanded : ''}`}
+                                } ${showSearchBar ? styles['expanded'] : ''}`}
                             >
                                 <button
                                     className={`${styles['search-button']} ${styles['menu-button']}`}
@@ -350,8 +350,8 @@ function Menu(props: Props) {
                             className={`${
                                 styles['header-background-overlay']
                             } ${hidden ? styles['hidden-menu-item'] : ''} ${
-                                backgroundOverlay ? styles.show : ''
-                            } ${hiding ? styles.hiding : ''}`}
+                                backgroundOverlay ? styles['show'] : ''
+                            } ${hiding ? styles['hiding'] : ''}`}
                             data-ga-name="menu_click"
                             data-ga-category="user interactions"
                             data-ga-action="menu click"
@@ -400,8 +400,8 @@ function Menu(props: Props) {
             <div
                 className={`${styles['mobile-header-background-overlay']} ${
                     hidden ? styles['hidden-menu-item'] : ''
-                } ${backgroundOverlay ? styles.show : ''} ${
-                    hiding ? styles.hiding : ''
+                } ${backgroundOverlay ? styles['show'] : ''} ${
+                    hiding ? styles['hiding'] : ''
                 }`}
                 data-ga-name="menu_click"
                 data-ga-category="user interactions"
@@ -416,7 +416,7 @@ function Menu(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.menu];
+    return [styles['menu']];
 }
 
 export { Menu, getCssClassNames };
diff --git a/src/components/menu/Profile.tsx b/src/components/menu/Profile.tsx
index 045668e0..7bc434ac 100644
--- a/src/components/menu/Profile.tsx
+++ b/src/components/menu/Profile.tsx
@@ -9,8 +9,8 @@ import { Button } from '../button/Button';
 import { ButtonCta } from '../button/ButtonCta';
 import { ButtonGhost } from '../button/ButtonGhost';
 import { Themes } from '../Themes';
-import styles from './Menu.module.scss';
-import buttonStyles from './MenuButton.module.scss';
+import * as styles from './Menu.module.scss';
+import * as buttonStyles from './MenuButton.module.scss';
 
 interface ProgressBlock {
     faded?: boolean;
@@ -37,7 +37,7 @@ export interface Props {
 function Profile(props: Props) {
     return (
         <div
-            className={`${styles.profile}${
+            className={`${styles['profile']}${
                 props.className ? ` ${props.className}` : ''
             } xs__p+4`}
         >
@@ -47,12 +47,14 @@ function Profile(props: Props) {
                         <div
                             className={`${styles['user-info']} heading sans xs xs__m-0 xs__mt+2 xs__mb+2`}
                         >
-                            <span className={`${styles.user} heading sans xs`}>
+                            <span
+                                className={`${styles['user']} heading sans xs`}
+                            >
                                 {props.fullName}
                             </span>
                             {props.companyName ? (
                                 <span
-                                    className={`${styles.company} body-text sans xs`}
+                                    className={`${styles['company']} body-text sans xs`}
                                 >
                                     {props.companyName}
                                 </span>
@@ -62,7 +64,7 @@ function Profile(props: Props) {
                         <menu className="xs__m-0 xs__p-0">
                             {props.hasQuotum ? (
                                 <div
-                                    className={`${styles.credit} xs__pt+2 xs__pb+2`}
+                                    className={`${styles['credit']} xs__pt+2 xs__pb+2`}
                                 >
                                     <span className="heading sans xs">
                                         Nog {props.freeArticlesCount}{' '}
@@ -71,7 +73,7 @@ function Profile(props: Props) {
                                             : 'artikelen'}{' '}
                                         over
                                     </span>
-                                    <div className={styles.progress}>
+                                    <div className={styles['progress']}>
                                         {props.progressBlocks?.map(
                                             (block, idx) => (
                                                 <span
@@ -80,7 +82,7 @@ function Profile(props: Props) {
                                                         styles['progress-block']
                                                     }${
                                                         block.faded
-                                                            ? ` ${styles.faded}`
+                                                            ? ` ${styles['faded']}`
                                                             : ''
                                                     }`}
                                                 />
@@ -179,7 +181,7 @@ function Profile(props: Props) {
 
                         {props.noSubscription ? (
                             <div
-                                className={`${styles.credit} xs__m-0 xs__mt+2 xs__mb+2`}
+                                className={`${styles['credit']} xs__m-0 xs__mt+2 xs__mb+2`}
                             >
                                 U heeft geen abonnement op Het Financieele
                                 Dagblad
@@ -192,12 +194,12 @@ function Profile(props: Props) {
                             className={`${styles['user-info']} xs__m-0 xs__mt+2 xs__mb+2`}
                         >
                             {props.fullName ? (
-                                <span className={styles.user}>
+                                <span className={styles['user']}>
                                     {props.fullName}
                                 </span>
                             ) : null}
                             {props.companyName ? (
-                                <span className={styles.company}>
+                                <span className={styles['company']}>
                                     {props.companyName}
                                 </span>
                             ) : null}
@@ -269,7 +271,7 @@ function Profile(props: Props) {
             <hr className="xs__m-0 xs__mt+2 xs__mb+2 xs__mr-4 xs__ml-4" />
             <a
                 href="https://fd.nl/service"
-                className={`${styles.service} heading sans xxs xs__m-0 xs__pt+2 xs__pb+2`}
+                className={`${styles['service']} heading sans xxs xs__m-0 xs__pt+2 xs__pb+2`}
                 data-ga-name="menu_click"
                 data-ga-category="user interactions"
                 data-ga-action="menu click"
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 1436e5b6..cc58b370 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import styles from './Modal.module.scss';
+import * as styles from './Modal.module.scss';
 import { CloseIcon } from '../../design-tokens/icons';
 
 export interface Props {
diff --git a/src/components/numberframe/NumberFrame.tsx b/src/components/numberframe/NumberFrame.tsx
index 4a1dbf5b..26c5cb44 100644
--- a/src/components/numberframe/NumberFrame.tsx
+++ b/src/components/numberframe/NumberFrame.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './NumberFrame.module.scss';
+import * as styles from './NumberFrame.module.scss';
 
 interface Props {
     number: string;
@@ -8,7 +8,7 @@ interface Props {
 
 function NumberFrame(props: Props) {
     return (
-        <div className={styles.numberFrame}>
+        <div className={styles['numberFrame']}>
             <h2>{props.number}</h2>
             <p>{props.description}</p>
         </div>
@@ -16,7 +16,7 @@ function NumberFrame(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.numberFrame];
+    return [styles['numberFrame']];
 }
 
 export { NumberFrame, getCssClassNames };
diff --git a/src/components/oembed/OEmbed.tsx b/src/components/oembed/OEmbed.tsx
index 1c063cda..88195d47 100644
--- a/src/components/oembed/OEmbed.tsx
+++ b/src/components/oembed/OEmbed.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './OEmbed.module.scss';
+import * as styles from './OEmbed.module.scss';
 
 interface Props {
     type: 'twitter-embed' | 'soundcloud-embed' | 'instagram-embed';
@@ -8,14 +8,14 @@ interface Props {
 function OEmbed(props: Props) {
     return (
         <div
-            className={`${styles.oembed} ${props.type}`}
+            className={`${styles['oembed']} ${props.type}`}
             data-url={props.url}
         />
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.oembed];
+    return [styles['oembed']];
 }
 
 export { OEmbed, getCssClassNames };
diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx
index 59057b6c..7349c342 100644
--- a/src/components/quote/Quote.tsx
+++ b/src/components/quote/Quote.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './Quote.module.scss';
+import * as styles from './Quote.module.scss';
 
 interface Props {
     className?: string;
@@ -10,7 +10,7 @@ interface Props {
 function Quote(props: Props) {
     return (
         <figure
-            className={`${styles.quote}${
+            className={`${styles['quote']}${
                 props.className ? ` ${props.className}` : ``
             }`}
         >
@@ -21,7 +21,7 @@ function Quote(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.quote];
+    return [styles['quote']];
 }
 
 export { Quote, getCssClassNames };
diff --git a/src/components/readmore/ReadMore.tsx b/src/components/readmore/ReadMore.tsx
index b2d25ffa..460ccdbb 100644
--- a/src/components/readmore/ReadMore.tsx
+++ b/src/components/readmore/ReadMore.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ReadMore.module.scss';
+import * as styles from './ReadMore.module.scss';
 
 export type Variants = 'default' | 'variant-1' | 'variant-2';
 
@@ -11,7 +11,7 @@ interface Props {
 
 function ReadMore(props: Props) {
     return (
-        <div data-variant={props.variant} className={styles.readMore}>
+        <div data-variant={props.variant} className={styles['readMore']}>
             <h3>{props.title}</h3>
             {props.links.map((link) => (
                 <p key={link} dangerouslySetInnerHTML={{ __html: link }} />
@@ -21,7 +21,7 @@ function ReadMore(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.readMore];
+    return [styles['readMore']];
 }
 
 export { ReadMore, getCssClassNames };
diff --git a/src/components/related-pdf/RelatedPdf.tsx b/src/components/related-pdf/RelatedPdf.tsx
index 70015612..f079ca54 100644
--- a/src/components/related-pdf/RelatedPdf.tsx
+++ b/src/components/related-pdf/RelatedPdf.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './RelatedPdf.module.scss';
+import * as styles from './RelatedPdf.module.scss';
 
 interface Props {
     fileId: string;
@@ -9,7 +9,7 @@ interface Props {
 function RelatedPdf(props: Props) {
     return (
         <a
-            className={styles.pdf}
+            className={styles['pdf']}
             href={`https://fd-binary-external-development.imgix.net/${props.fileName}?dl=${props.title}`}
         >
             <i className="ico ico-download">📎</i>
@@ -19,7 +19,7 @@ function RelatedPdf(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.pdf];
+    return [styles['pdf']];
 }
 
 export { RelatedPdf, getCssClassNames };
diff --git a/src/components/stockticker/StockTicker.tsx b/src/components/stockticker/StockTicker.tsx
index f3dcc143..873af7a8 100644
--- a/src/components/stockticker/StockTicker.tsx
+++ b/src/components/stockticker/StockTicker.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styles from './StockTicker.module.scss';
+import * as styles from './StockTicker.module.scss';
 import { ValueUpIcon, ValueDownIcon } from '../../design-tokens/icons';
 
 export type Stock = {
@@ -33,9 +33,9 @@ function StockTicker(props: Props) {
     function getUpOrDownClass(current, next) {
         let className = '';
         if (current > next) {
-            className = styles.down;
+            className = styles['down'];
         } else if (current < next) {
-            className = styles.up;
+            className = styles['up'];
         }
 
         return className;
@@ -43,16 +43,16 @@ function StockTicker(props: Props) {
 
     function getStockContainerBg(current) {
         if (current > 0) {
-            return styles.stockContainerPositive;
+            return styles['stockContainerPositive'];
         } else if (current < 0) {
-            return styles.stockContainerNegative;
+            return styles['stockContainerNegative'];
         }
     }
 
     return (
         <section
             className={`${props.className ? `${props.className} ` : ''}${
-                styles.stockTicker
+                styles['stockTicker']
             }`}
         >
             {current.map((stock) => {
@@ -60,33 +60,33 @@ function StockTicker(props: Props) {
                     <a
                         key={stock.name}
                         className={`${
-                            styles.stockContainer
+                            styles['stockContainer']
                         } ${getStockContainerBg(stock.percentage)} ${
-                            stock.open ? '' : styles.closed
+                            stock.open ? '' : styles['closed']
                         }`}
                         href={stock.href}
                     >
-                        <div className={styles.arrow}>
+                        <div className={styles['arrow']}>
                             {stock.percentage >= 0 ? (
-                                <span className={styles.icon}>
+                                <span className={styles['icon']}>
                                     <ValueUpIcon />
                                 </span>
                             ) : (
-                                <span className={styles.icon}>
+                                <span className={styles['icon']}>
                                     <ValueDownIcon />
                                 </span>
                             )}
                         </div>
-                        <span className={styles.stock}>
-                            <span className={styles.stockName}>
+                        <span className={styles['stock']}>
+                            <span className={styles['stockName']}>
                                 {stock.name}
                             </span>
                             <span
-                                className={`${styles.price} ${
+                                className={`${styles['price']} ${
                                     next.length && stock.open
-                                        ? styles.transitioning
+                                        ? styles['transitioning']
                                         : ''
-                                } ${stock.open ? '' : styles.closed}`}
+                                } ${stock.open ? '' : styles['closed']}`}
                             >
                                 {next.map((nextStock) => {
                                     if (nextStock.name === stock.name) {
@@ -99,12 +99,12 @@ function StockTicker(props: Props) {
                                                 key={nextStock.name}
                                             >
                                                 <span
-                                                    className={`${styles.next} ${upDownClass}`}
+                                                    className={`${styles['next']} ${upDownClass}`}
                                                 >
                                                     {nextStock.price}
                                                 </span>
                                                 <span
-                                                    className={`${styles.current} ${upDownClass}`}
+                                                    className={`${styles['current']} ${upDownClass}`}
                                                 >
                                                     {stock.price}
                                                 </span>
@@ -115,13 +115,13 @@ function StockTicker(props: Props) {
                                 {stock.price}
                             </span>
                             <span
-                                className={`${styles.percentage} 
+                                className={`${styles['percentage']} 
                                 ${
                                     next.length && stock.open
-                                        ? styles.transitioning
+                                        ? styles['transitioning']
                                         : ''
-                                } ${styles.percentage} ${
-                                    stock.open ? '' : styles.closed
+                                } ${styles['percentage']} ${
+                                    stock.open ? '' : styles['closed']
                                 }`}
                             >
                                 {next.map((nextStock) => {
@@ -136,7 +136,7 @@ function StockTicker(props: Props) {
                                             >
                                                 <span
                                                     key={nextStock.name}
-                                                    className={`${styles.next} ${upDownClass}`}
+                                                    className={`${styles['next']} ${upDownClass}`}
                                                 >
                                                     {nextStock.percentage > 0
                                                         ? '+'
@@ -145,7 +145,7 @@ function StockTicker(props: Props) {
                                                 </span>
 
                                                 <span
-                                                    className={`${styles.current} ${upDownClass}`}
+                                                    className={`${styles['current']} ${upDownClass}`}
                                                 >
                                                     {nextStock.percentage > 0
                                                         ? '+'
@@ -168,7 +168,7 @@ function StockTicker(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.stockTicker];
+    return [styles['stockTicker']];
 }
 
 export { getCssClassNames, StockTicker };
diff --git a/src/components/textframe/TextFrame.tsx b/src/components/textframe/TextFrame.tsx
index 957dbe5b..7e30e6fe 100644
--- a/src/components/textframe/TextFrame.tsx
+++ b/src/components/textframe/TextFrame.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './TextFrame.module.scss';
+import * as styles from './TextFrame.module.scss';
 
 interface Props {
     alignment?: 'block' | 'right' | any;
@@ -11,8 +11,8 @@ interface Props {
 function TextFrame(props: Props) {
     return (
         <div
-            className={`${styles.textFrame} ${
-                props.alignment === 'right' ? styles.right : ''
+            className={`${styles['textFrame']} ${
+                props.alignment === 'right' ? styles['right'] : ''
             }`}
         >
             <h3 className="heading sans s">{props.title}</h3>
@@ -47,7 +47,7 @@ function TextFrame(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.textFrame];
+    return [styles['textFrame']];
 }
 
 export { TextFrame, getCssClassNames };
diff --git a/src/components/toolbar/HorizontalToolbar.tsx b/src/components/toolbar/HorizontalToolbar.tsx
index 519c08d2..577bbd8b 100644
--- a/src/components/toolbar/HorizontalToolbar.tsx
+++ b/src/components/toolbar/HorizontalToolbar.tsx
@@ -12,7 +12,7 @@ import {
     Button,
     getCssClassNames as getButtonCssClassNames,
 } from '../button/Button';
-import styles from './HorizontalToolbar.module.scss';
+import * as styles from './HorizontalToolbar.module.scss';
 
 export enum EventType {
     BOOKMARK = 'BOOKMARK',
@@ -45,57 +45,57 @@ export interface Props {
 function HorizontalToolbar(props: Props) {
     return (
         <section
-            className={`${props.className ?? ''} ${styles.horizontalToolbar}`}
+            className={`${props.className ?? ''} ${styles['horizontalToolbar']}`}
         >
             <Button
                 title="Deel via WhatsApp"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.WHATSAPP, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <WhatsAppIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via WhatsApp</span>
+                <span className={styles['ariaLabel']}>Deel via WhatsApp</span>
             </Button>
             <Button
                 title="Deel via Twitter"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.TWITTER, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <TwitterIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via Twitter</span>
+                <span className={styles['ariaLabel']}>Deel via Twitter</span>
             </Button>
             <Button
                 title="Deel via LinkedIn"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.LINKED_IN, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <LinkedInIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via LinkedIn</span>
+                <span className={styles['ariaLabel']}>Deel via LinkedIn</span>
             </Button>
             <Button
                 title="Deel via Facebook"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.FACEBOOK, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <FacebookIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via Facebook</span>
+                <span className={styles['ariaLabel']}>Deel via Facebook</span>
             </Button>
             <Button
                 title="Deel via E-mail"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.EMAIL, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <EnvelopeIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via E-mail</span>
+                <span className={styles['ariaLabel']}>Deel via E-mail</span>
             </Button>
             <hr />
             <Button
@@ -104,20 +104,22 @@ function HorizontalToolbar(props: Props) {
                 className={props.bookmarked && `active`}
                 onClick={props.onClick.bind(null, EventType.BOOKMARK, props)}
             >
-                <span className={`${styles.icon} ${styles.bookmarkFill}`}>
+                <span className={`${styles['icon']} ${styles['bookmarkFill']}`}>
                     <BookmarkIcon />
                 </span>
-                <span className={`${styles.icon} ${styles.bookmarkClear}`}>
+                <span
+                    className={`${styles['icon']} ${styles['bookmarkClear']}`}
+                >
                     <BookmarkOIcon />
                 </span>
-                <span className={styles.ariaLabel}>Bewaren</span>
+                <span className={styles['ariaLabel']}>Bewaren</span>
             </Button>
         </section>
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.horizontalToolbar, ...getButtonCssClassNames()];
+    return [styles['horizontalToolbar'], ...getButtonCssClassNames()];
 }
 
 export { HorizontalToolbar, getCssClassNames };
diff --git a/src/components/toolbar/VerticalToolbar.tsx b/src/components/toolbar/VerticalToolbar.tsx
index 48d96c94..2d367bb8 100644
--- a/src/components/toolbar/VerticalToolbar.tsx
+++ b/src/components/toolbar/VerticalToolbar.tsx
@@ -14,7 +14,7 @@ import {
     Button,
     getCssClassNames as getButtonCssClassNames,
 } from '../button/Button';
-import styles from './VerticalToolbar.module.scss';
+import * as styles from './VerticalToolbar.module.scss';
 
 export enum EventType {
     BOOKMARK = 'BOOKMARK',
@@ -47,57 +47,57 @@ export interface Props {
 function VerticalToolbar(props: Props) {
     return (
         <section
-            className={`${props.className ?? ''} ${styles.verticalToolbar}`}
+            className={`${props.className ?? ''} ${styles['verticalToolbar']}`}
         >
             <Button
                 title="Deel via WhatsApp"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.WHATSAPP, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <WhatsAppIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via WhatsApp</span>
+                <span className={styles['ariaLabel']}>Deel via WhatsApp</span>
             </Button>
             <Button
                 title="Deel via Twitter"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.TWITTER, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <TwitterIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via Twitter</span>
+                <span className={styles['ariaLabel']}>Deel via Twitter</span>
             </Button>
             <Button
                 title="Deel via LinkedIn"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.LINKED_IN, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <LinkedInIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via LinkedIn</span>
+                <span className={styles['ariaLabel']}>Deel via LinkedIn</span>
             </Button>
             <Button
                 title="Deel via Facebook"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.FACEBOOK, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <FacebookIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via Facebook</span>
+                <span className={styles['ariaLabel']}>Deel via Facebook</span>
             </Button>
             <Button
                 title="Deel via E-mail"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.EMAIL, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <EnvelopeIcon />
                 </span>
-                <span className={styles.ariaLabel}>Deel via E-mail</span>
+                <span className={styles['ariaLabel']}>Deel via E-mail</span>
             </Button>
             <hr />
             <Button
@@ -106,40 +106,42 @@ function VerticalToolbar(props: Props) {
                 className={props.bookmarked && `active`}
                 onClick={props.onClick.bind(null, EventType.BOOKMARK, props)}
             >
-                <span className={`${styles.icon} ${styles.bookmarkFill}`}>
+                <span className={`${styles['icon']} ${styles['bookmarkFill']}`}>
                     <BookmarkIcon />
                 </span>
-                <span className={`${styles.icon} ${styles.bookmarkClear}`}>
+                <span
+                    className={`${styles['icon']} ${styles['bookmarkClear']}`}
+                >
                     <BookmarkOIcon />
                 </span>
-                <span className={styles.ariaLabel}>Bewaren</span>
+                <span className={styles['ariaLabel']}>Bewaren</span>
             </Button>
             <Button
                 title="Download PDF"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.DOWNLOAD, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <DownloadIcon />
                 </span>
-                <span className={styles.ariaLabel}>Download PDF</span>
+                <span className={styles['ariaLabel']}>Download PDF</span>
             </Button>
             <Button
                 title="Krant weergave"
                 size="s"
                 onClick={props.onClick.bind(null, EventType.NEWSPAPER, props)}
             >
-                <span className={styles.icon}>
+                <span className={styles['icon']}>
                     <NewspaperIcon />
                 </span>
-                <span className={styles.ariaLabel}>Krant weergave</span>
+                <span className={styles['ariaLabel']}>Krant weergave</span>
             </Button>
         </section>
     );
 }
 
 function getCssClassNames(): string[] {
-    return [styles.verticalToolbar, ...getButtonCssClassNames()];
+    return [styles['verticalToolbar'], ...getButtonCssClassNames()];
 }
 
 export { VerticalToolbar, getCssClassNames };
diff --git a/src/components/utils/image/FdImgix.tsx b/src/components/utils/image/FdImgix.tsx
index fb81f3ca..7c8cd5c7 100644
--- a/src/components/utils/image/FdImgix.tsx
+++ b/src/components/utils/image/FdImgix.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Imgix, { SharedImgixAndSourceProps } from 'react-imgix';
 
-import styles from './FdImage.module.scss';
+import * as styles from './FdImage.module.scss';
 
 type cssValue = `${number}${'px' | 'rem' | 'vw'}`;
 
@@ -102,7 +102,7 @@ export function FdImgix({
         <>
             {!imgixProps.src && (
                 <Imgix
-                    className={`${styles.image} ${className}`}
+                    className={`${styles['image']} ${className}`}
                     sizes={imageSizesWidth.join(', ')}
                     {...(imgixProps as SharedImgixAndSourceProps)}
                     src={`${noImagePlaceholder}`}
@@ -110,7 +110,7 @@ export function FdImgix({
             )}
             {imgixProps.src && (
                 <Imgix
-                    className={`${styles.image} ${className}`}
+                    className={`${styles['image']} ${className}`}
                     sizes={imageSizesWidth.join(', ')}
                     {...(imgixProps as SharedImgixAndSourceProps)}
                 />
diff --git a/src/components/vimeo/Vimeo.tsx b/src/components/vimeo/Vimeo.tsx
index a33f382f..c758b660 100644
--- a/src/components/vimeo/Vimeo.tsx
+++ b/src/components/vimeo/Vimeo.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import styles from './Vimeo.module.scss';
+import * as styles from './Vimeo.module.scss';
 
 interface Props {
     id: string;
 }
 function Vimeo(props: Props) {
     return (
-        <div className={styles.vimeo}>
+        <div className={styles['vimeo']}>
             <iframe
                 src={`https://player.vimeo.com/video/${props.id}?badge=0`}
                 frameBorder="0"
@@ -17,7 +17,7 @@ function Vimeo(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.vimeo];
+    return [styles['vimeo']];
 }
 
 export { Vimeo, getCssClassNames };
diff --git a/src/components/wordframe/WordFrame.tsx b/src/components/wordframe/WordFrame.tsx
index ced4f57f..c9354d8b 100644
--- a/src/components/wordframe/WordFrame.tsx
+++ b/src/components/wordframe/WordFrame.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './WordFrame.module.scss';
+import * as styles from './WordFrame.module.scss';
 
 interface Props {
     title: string;
@@ -8,7 +8,7 @@ interface Props {
 
 function WordFrame(props: Props) {
     return (
-        <div className={styles.wordFrame}>
+        <div className={styles['wordFrame']}>
             <h3>{props.title}</h3>
             {props.description ? <p>{props.description}</p> : null}
         </div>
@@ -16,7 +16,7 @@ function WordFrame(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.wordFrame];
+    return [styles['wordFrame']];
 }
 
 export { WordFrame, getCssClassNames };
diff --git a/src/components/youtube/Youtube.tsx b/src/components/youtube/Youtube.tsx
index 0f39b522..300ddf2d 100644
--- a/src/components/youtube/Youtube.tsx
+++ b/src/components/youtube/Youtube.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import styles from './Youtube.module.scss';
+import * as styles from './Youtube.module.scss';
 
 interface Props {
     id: string;
 }
 function Youtube(props: Props) {
     return (
-        <div className={styles.youtube}>
+        <div className={styles['youtube']}>
             <iframe
                 src={`https://www.youtube.com/embed/${props.id}`}
                 frameBorder="0"
@@ -17,7 +17,7 @@ function Youtube(props: Props) {
 }
 
 function getCssClassNames(): string[] {
-    return [styles.youtube];
+    return [styles['youtube']];
 }
 
 export { Youtube, getCssClassNames };