diff --git a/components/articles/blocks/ArticlesByTag2.js b/components/articles/blocks/ArticlesByTag2.js
index 45642f25..35be8713 100644
--- a/components/articles/blocks/ArticlesByTag2.js
+++ b/components/articles/blocks/ArticlesByTag2.js
@@ -1,8 +1,7 @@
-import './articlesByTag2.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import Text from 'components/common/Text';
 import ArticleCard from 'components/articles/cards/ArticleCard';
@@ -11,9 +10,12 @@ import { IdsArray } from 'utils/customPropTypes';
 import { getTagLink, getTopicLink, getTagImageRenderer } from 'utils/tags';
 
 import { TOPIC } from 'constants/misc';
+import styles from './articlesByTag2.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = bem(styles);
+
 const ArticlesByTag2 = ({ block, data }) => {
   const { tagId, articlesIds } = block;
   const { tags, articles } = data;
@@ -25,41 +27,33 @@ const ArticlesByTag2 = ({ block, data }) => {
   const topicLink = getTopicLink({ topic: topicSlug, dark: true });
 
   return (
-    <BlockWrapper className="articles-by-tag-2" withBackground>
-      <div
-        className={cn('articles-by-tag-2__labels', {
-          'articles-by-tag-2__labels--right': isBrand,
-        })}
-      >
-        <div className="articles-by-tag-2__top-mobile-labels">
+    <BlockWrapper className={b()} withBackground>
+      <div className={b('labels', { right: isBrand })}>
+        <div className={b('top-mobile-labels')}>
           {isBrand &&
             getTagImageRenderer({
               theme: 'dark',
-              className: 'articles-by-tag-2__logo',
+              className: b('logo'),
             })(tag)}
-          <div className="articles-by-tag-2__label">
+          <div className={b('label')}>
             <Text id={`topic.${topicSlug}_essentials`} />: {tagLink}
           </div>
         </div>
-        <div className="articles-by-tag-2__label articles-by-tag-2__bottom-desktop-label">
-          {topicLink}
-        </div>
+        <div className={cn(b('label'), b('bottom-desktop-label'))}>{topicLink}</div>
       </div>
 
-      <div className="articles-by-tag-2__cards">
-        <div className="articles-by-tag-2__card-1">
+      <div className={b('cards')}>
+        <div className={b('card-1')}>
           <ArticleCard {...first} context={['articles-by-tag-2']} />
         </div>
 
-        <div className="articles-by-tag-2__card-2">
+        <div className={b('card-2')}>
           <ArticleCard {...second} context={['articles-by-tag-2']} />
         </div>
       </div>
 
-      <div className="articles-by-tag-2__bottom-labels">
-        <div className="articles-by-tag-2__label articles-by-tag-2__bottom-mobile-label">
-          {topicLink}
-        </div>
+      <div className={b('bottom-labels')}>
+        <div className={cn(b('label'), b('bottom-mobile-label'))}>{topicLink}</div>
       </div>
     </BlockWrapper>
   );
diff --git a/components/articles/blocks/ArticlesByTag3.js b/components/articles/blocks/ArticlesByTag3.js
index 6e163b85..d7037da2 100644
--- a/components/articles/blocks/ArticlesByTag3.js
+++ b/components/articles/blocks/ArticlesByTag3.js
@@ -1,15 +1,18 @@
-import './articlesByTag3.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import ArticleCard from 'components/articles/cards/ArticleCard';
 
 import { IdsArray } from 'utils/customPropTypes';
 import { getTagLink, getTopicLink } from 'utils/tags';
+import styles from './articlesByTag3.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = bem(styles);
+
 const ArticlesByTag3 = ({ block, data }) => {
   const { tagId, articlesIds } = block;
   const { tags, articles } = data;
@@ -18,23 +21,23 @@ const ArticlesByTag3 = ({ block, data }) => {
   const topicLink = getTopicLink({ topic: tag.topicSlug, dark: true });
 
   return (
-    <BlockWrapper className="articles-by-tag-3">
-      <div className="articles-by-tag-3__combined-title-line articles-by-tag-3__title">
+    <BlockWrapper>
+      <div className={cn(b('combined-title-line'), b('title'))}>
         {tagLink}
         {topicLink}
       </div>
 
-      <div className="articles-by-tag-3__separate-header articles-by-tag-3__title">{tagLink}</div>
+      <div className={cn(b('separate-header'), b('title'))}>{tagLink}</div>
 
-      <div className="articles-by-tag-3__cards">
+      <div className={b('cards')}>
         {articlesIds.map((id, index) => (
-          <div key={id} className={`articles-by-tag-3__card-${index + 1}`}>
+          <div key={id} className={b(`card-${index + 1}`)}>
             <ArticleCard {...articles[id]} context={['articles-by-tag-3']} />
           </div>
         ))}
       </div>
 
-      <div className="articles-by-tag-3__separate-footer articles-by-tag-3__title">{topicLink}</div>
+      <div className={cn(b('separate-footer'), b('title'))}>{topicLink}</div>
     </BlockWrapper>
   );
 };
diff --git a/components/articles/blocks/BannerBlock.js b/components/articles/blocks/BannerBlock.js
index 9689fd96..4b31a024 100644
--- a/components/articles/blocks/BannerBlock.js
+++ b/components/articles/blocks/BannerBlock.js
@@ -1,14 +1,16 @@
-import './banner.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import block from 'bem-css-modules';
+import cn from 'classnames';
 
 import Picture from 'components/common/Picture';
 import ExternalLink from 'components/common/ExternalLink';
 import { useLocalization } from 'components/common/Text';
+import styles from './banner.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = block(styles);
 const LINK = 'https://map.wir.by?utm_source=wirby-main-page';
 
 const getLink = (width, name) =>
@@ -26,12 +28,12 @@ const BANNERS = Object.entries({
 }, {});
 
 const BannerBlock = ({ block: { banner } }) => {
-  const title = useLocalization('banners.mapa-title');
+  const title = useLocalization(`banners.${banner}-title`);
   return (
     <BlockWrapper>
-      <div className={`banner banner-${banner}`}>
+      <div className={b()}>
         <ExternalLink href={LINK}>
-          <div className={`banner__title banner-${banner}__title`}>{title}</div>
+          <div className={cn(b('title'), b(`${banner}-title`))}>{title}</div>
           <Picture sources={BANNERS} alt={title} />
         </ExternalLink>
       </div>
diff --git a/components/articles/blocks/BlockWrapper.js b/components/articles/blocks/BlockWrapper.js
index 8551c4df..5b70bc87 100644
--- a/components/articles/blocks/BlockWrapper.js
+++ b/components/articles/blocks/BlockWrapper.js
@@ -1,8 +1,10 @@
-import './blockWrapper.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import block from 'bem-css-modules';
+import styles from './blockWrapper.module.scss';
+
+const b = block(styles);
 
 const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
   <div
@@ -12,8 +14,7 @@ const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
         'wir-with-background': withBackground,
         'wir-no-background': !withBackground,
       },
-      'block',
-      { 'block--negative-margin-top': negativeTop },
+      b({ 'negative-margin-top': negativeTop }),
       className
     )}
   >
diff --git a/components/articles/blocks/DiaryBlock.js b/components/articles/blocks/DiaryBlock.js
index 121dfa0e..b0c147e3 100644
--- a/components/articles/blocks/DiaryBlock.js
+++ b/components/articles/blocks/DiaryBlock.js
@@ -1,9 +1,7 @@
-import './diary.scss';
-
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import cn from 'classnames';
+import block from 'bem-css-modules';
 
 import Link from 'components/common/Link';
 import Text from 'components/common/Text';
@@ -19,9 +17,12 @@ import fiberyToString from 'utils/fibery/toString';
 import { SHORT_DATE_FORMAT } from 'constants';
 import { DIARY_PICTURE_WIDTH } from 'constants/misc';
 import { ROUTES_NAMES } from 'routes';
+import styles from './diary.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = block(styles);
+
 const mapStateToProps = (state, { lang }) => ({
   diary: diarySelectors.getCurrent(state, lang),
 });
@@ -38,10 +39,10 @@ const DiaryBlock = ({ diary, fetchData }) => {
 
   return (
     <>
-      <BlockWrapper className="diary" negativeTop>
-        <div className="diary__content">
+      <BlockWrapper negativeTop>
+        <div className={b('content')}>
           <Link
-            className={cn('diary__picture', { 'diary__picture--no-image': !diaryImage })}
+            className={b('picture', { 'no-image': !diaryImage })}
             route={ROUTES_NAMES.diary}
             params={{ slug }}
             noStyles
@@ -50,16 +51,16 @@ const DiaryBlock = ({ diary, fetchData }) => {
               <Image alt={name} sourceSizes={[DIARY_PICTURE_WIDTH]} baseUrl={diaryImage} mode="x" />
             )}
           </Link>
-          <div className="diary__text-content">
-            <div className="diary__title">
-              <span className="diary__date">{formatDate(date, SHORT_DATE_FORMAT)}</span>
-              <span className="diary__year">{getYear(date)}</span>
-              <span className="diary__name">{name}</span>
+          <div className={b('text-content')}>
+            <div className={b('title')}>
+              <span className={b('date')}>{formatDate(date, SHORT_DATE_FORMAT)}</span>
+              <span>{getYear(date)}</span>
+              <span>{name}</span>
               <Text id="diary.wrote" />:
             </div>
             {text && (
-              <div className="diary__text-wrap">
-                <Link className="diary__text" route={ROUTES_NAMES.diary} params={{ slug }} noStyles>
+              <div className={b('text-wrap')}>
+                <Link className={b('text')} route={ROUTES_NAMES.diary} params={{ slug }} noStyles>
                   {fiberyToString(text.content)}
                 </Link>
                 <Link route={ROUTES_NAMES.diary} params={{ slug }}>
@@ -67,7 +68,7 @@ const DiaryBlock = ({ diary, fetchData }) => {
                 </Link>
               </div>
             )}
-            <DiaryArrows className="diary__arrows" size={24} />
+            <DiaryArrows className={b('arrows')} size={24} />
           </div>
         </div>
       </BlockWrapper>
diff --git a/components/articles/blocks/TagPageBlockB.js b/components/articles/blocks/TagPageBlockB.js
index dd4d398b..b64a93c3 100644
--- a/components/articles/blocks/TagPageBlockB.js
+++ b/components/articles/blocks/TagPageBlockB.js
@@ -1,5 +1,3 @@
-import './tagPageBlockB.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/components/articles/blocks/TagPageBlockCD.js b/components/articles/blocks/TagPageBlockCD.js
index 9f4778a1..ceeab231 100644
--- a/components/articles/blocks/TagPageBlockCD.js
+++ b/components/articles/blocks/TagPageBlockCD.js
@@ -1,5 +1,3 @@
-import './tagPageBlockCD.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/components/articles/blocks/TagsByTopic.js b/components/articles/blocks/TagsByTopic.js
index aeb06a2b..383222da 100644
--- a/components/articles/blocks/TagsByTopic.js
+++ b/components/articles/blocks/TagsByTopic.js
@@ -1,5 +1,3 @@
-import './tagsByTopic.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
diff --git a/components/articles/blocks/TwoArticlesInRow.js b/components/articles/blocks/TwoArticlesInRow.js
index 48a49649..0a830865 100644
--- a/components/articles/blocks/TwoArticlesInRow.js
+++ b/components/articles/blocks/TwoArticlesInRow.js
@@ -1,19 +1,23 @@
-import './twoInRow.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import ArticleCard from 'components/articles/cards/ArticleCard';
 import { ArticleShape } from 'utils/customPropTypes';
+import styles from './twoInRow.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = bem(styles);
+
 const TwoArticlesInRow = ({ className, first, second }) => (
-  <BlockWrapper className={`two-in-row ${className}`}>
-    <div className="two-in-row__first">
+  <BlockWrapper className={cn(b(), className)}>
+    <div className={b('first')}>
       <ArticleCard {...first} context={['two-in-row', 'first']} />
     </div>
-    <div className="two-in-row__second">
+    {/* <div className={b('second')}> */}
+    <div>
       <ArticleCard {...second} context={['two-in-row', 'second']} />
     </div>
   </BlockWrapper>
diff --git a/components/articles/blocks/articlesByTag3.module.scss b/components/articles/blocks/articlesByTag3.module.scss
index 2c92115a..e4e880f8 100644
--- a/components/articles/blocks/articlesByTag3.module.scss
+++ b/components/articles/blocks/articlesByTag3.module.scss
@@ -33,6 +33,10 @@
     flex-direction: row;
     justify-content: space-between;
   }
+
+  &__card-1 {
+    display: block;
+  }
 }
 
 @include screen-desktop {
diff --git a/components/articles/blocks/banner.module.scss b/components/articles/blocks/banner.module.scss
index 087619aa..bcf8ea95 100644
--- a/components/articles/blocks/banner.module.scss
+++ b/components/articles/blocks/banner.module.scss
@@ -17,10 +17,8 @@
     line-height: 36px;
     position: absolute;
   }
-}
 
-.banner-mapa {
-  &__title {
+  &__mapa-title {
     @include screen-desktop {
       height: 108px;
       left: 330px;
diff --git a/components/articles/blocks/blockWrapper.module.scss b/components/articles/blocks/blockWrapper.module.scss
index 4619555b..3192bc7a 100644
--- a/components/articles/blocks/blockWrapper.module.scss
+++ b/components/articles/blocks/blockWrapper.module.scss
@@ -2,11 +2,14 @@
 @import 'styles/variables';
 
 .block {
-  &.wir-no-background {
+  &:global(.wir-no-background) {
     margin-top: 60px;
 
+    // FIXME(@uladbohdan): refactor
+    // https://trello.com/c/NTBa9AE1/495-block-wrapper-margin-fix
+    // to eliminate this workaround by properly handling Block margins.
+
     @include screen-tablet-touch-mobile {
-      // FIXME: to eliminate this workaround by properly handling Block margins.
       &.tag-page-block-b,
       &.tag-page-block-cd {
         margin-top: 0;
@@ -14,7 +17,7 @@
     }
   }
 
-  &.wir-with-background {
+  &:global(.wir-with-background) {
     background-color: $primary-black;
     margin-bottom: 20px;
     margin-top: 80px;
diff --git a/components/articles/blocks/tagPageBlockB.module.scss b/components/articles/blocks/tagPageBlockB.scss
similarity index 100%
rename from components/articles/blocks/tagPageBlockB.module.scss
rename to components/articles/blocks/tagPageBlockB.scss
diff --git a/components/articles/blocks/tagPageBlockCD.module.scss b/components/articles/blocks/tagPageBlockCD.scss
similarity index 100%
rename from components/articles/blocks/tagPageBlockCD.module.scss
rename to components/articles/blocks/tagPageBlockCD.scss
diff --git a/components/articles/blocks/tagsByTopic.module.scss b/components/articles/blocks/tagsByTopic.scss
similarity index 100%
rename from components/articles/blocks/tagsByTopic.module.scss
rename to components/articles/blocks/tagsByTopic.scss
diff --git a/components/specials/diary/DiaryArrows.js b/components/specials/diary/DiaryArrows.js
index 2c2548d1..914b5dd8 100644
--- a/components/specials/diary/DiaryArrows.js
+++ b/components/specials/diary/DiaryArrows.js
@@ -1,11 +1,11 @@
-import './diaryArrows.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import cn from 'classnames';
 
 import Clickable from 'components/common/Clickable';
 import { diaryActions, diarySelectors } from 'redux/ducks/diary';
+import styles from './diaryArrows.module.scss';
 
 import ArrowIcon from './ArrowIcon';
 
@@ -20,7 +20,7 @@ const mapDispatchToProps = {
 };
 
 const DiaryArrows = ({ className, size, getPrev, getNext, isNextAvailable }) => (
-  <div className={`diary-arrows ${className}`}>
+  <div className={cn(styles.arrows, className)}>
     <Clickable onClick={getPrev} linkStyle titleId="diary.previous">
       <ArrowIcon direction="left" size={size} />
     </Clickable>
diff --git a/components/specials/diary/DiaryLinkArrows.js b/components/specials/diary/DiaryLinkArrows.js
index 1dee2952..cc7dad35 100644
--- a/components/specials/diary/DiaryLinkArrows.js
+++ b/components/specials/diary/DiaryLinkArrows.js
@@ -1,4 +1,4 @@
-import './diaryArrows.scss';
+import './diaryArrows.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';
diff --git a/components/specials/diary/diaryArrows.module.scss b/components/specials/diary/diaryArrows.module.scss
index c3f134d1..ba783e6b 100644
--- a/components/specials/diary/diaryArrows.module.scss
+++ b/components/specials/diary/diaryArrows.module.scss
@@ -1,4 +1,4 @@
-.diary-arrows {
+.arrows {
   align-items: center;
   display: flex;
   flex-direction: row;
diff --git a/pages/_app.js b/pages/_app.js
index b7beacca..bd50c7fc 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -4,6 +4,11 @@ import 'components/common/ui/link.scss';
 import 'components/common/layout/layout.scss';
 import 'components/common/layout/header/styles.scss';
 
+// FIXME(@uladbohdan):
+import 'components/articles/blocks/tagPageBlockB.scss';
+import 'components/articles/blocks/tagPageBlockCD.scss';
+import 'components/articles/blocks/tagsByTopic.scss';
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactGA from 'react-ga';
@@ -147,7 +152,6 @@ class Root extends App {
           <MetaAppleTouchDevices title={localize(titleApple, locale)} />
           <Head>
             <link rel="icon" type="image/png" href={FAVICON_URL} />
-            <link rel="preconnect" href="https://www.google-analytics.com" />
             {/* https://developers.google.com/search/reference/podcast/homepage-requirements */}
             {/* <link
               rel="alternate"
diff --git a/stylelint.config.js b/stylelint.config.js
index 97601bc1..477f80e3 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -125,5 +125,13 @@ module.exports = {
 
     // Prevents adding unnecesary Specificity or complicated sass stuff
     'scss/selector-no-redundant-nesting-selector': true,
+
+    // pass css-modules :global selector
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['/^global$/'],
+      },
+    ],
   },
 };