From acebb3a44e5cf2a96eb48fd35a3574833f9b0bf1 Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:04:08 +0200
Subject: Fix the SASS compilation error

---
 sass/fonts.sass                     | 3 +--
 sass/front-page/banner.sass         | 6 +-----
 sass/front-page/bottom-text.sass    | 2 +-
 sass/front-page/inform-columns.sass | 2 +-
 sass/front-page/main-text.sass      | 2 +-
 5 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/sass/fonts.sass b/sass/fonts.sass
index 8875af9..a22bc92 100644
--- a/sass/fonts.sass
+++ b/sass/fonts.sass
@@ -1,4 +1,3 @@
-
 @font-face
   font-family: 'Lato'
   font-style: normal
@@ -21,4 +20,4 @@
   font-weight: 900
   font-display: swap
   src: local('Lato Black'), local('Lato-Black'), url('../fonts/lato-black.woff2') format('woff2')
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
\ No newline at end of file
diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
index c243d03..8cbea55 100644
--- a/sass/front-page/banner.sass
+++ b/sass/front-page/banner.sass
@@ -1,4 +1,4 @@
-@import settings.sass
+@import ../settings.sass
   
 section.banner
   background-image: url("/img/front-page/banner/banner-bg.svg")
@@ -62,10 +62,6 @@ section.banner
         +resp(sm)
           height: 38px
           font-size: 14px
-          // margin-left: auto
-          // margin-right: auto
-          // margin-top: 50px
-          // position: absolute
         &:hover
           background: $white
           color: $black
\ No newline at end of file
diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
index e8aee16..60b83d6 100644
--- a/sass/front-page/bottom-text.sass
+++ b/sass/front-page/bottom-text.sass
@@ -1,4 +1,4 @@
-@import settings.sass
+@import ../settings.sass
 
 section.bottom-text
   div.bottom-text__inner
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
index 68930df..a12befa 100644
--- a/sass/front-page/inform-columns.sass
+++ b/sass/front-page/inform-columns.sass
@@ -1,4 +1,4 @@
-@import settings.sass
+@import ../settings.sass
 
 section.inform-columns
   div.inform-column__inner
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
index 54e0786..2534165 100644
--- a/sass/front-page/main-text.sass
+++ b/sass/front-page/main-text.sass
@@ -1,4 +1,4 @@
-@import settings.sass
+@import ../settings.sass
   
 section.main-text
   max-width: 884px
-- 
cgit v1.2.3


From 7db3add7156413c25aa9461dfa5fdcc50c35be3a Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:05:05 +0200
Subject: Move fixup.css styles to main.sass, add .container to #content block

---
 sass/main.sass      | 14 +++++++++++++-
 site/index.html     |  6 +++---
 templates/main.html |  5 +++--
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/sass/main.sass b/sass/main.sass
index 53de465..6e409f8 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -21,16 +21,28 @@ p
   font-weight: normal
   font-size: 18px
   line-height: 180%
-  text-align: center
   color: $black
   +resp(sm)
     font-size: 14px
+  @supports (hyphens: auto)
+    text-align: justify
+    hyphens: auto
+
+pre, code, sample
+  white-space: pre-wrap
+  hyphens: none
 
 div.container
   max-width: 1340px
   margin: 0 auto
   padding-left: 15px
   padding-right: 15px
+  &.small
+    max-width: 1000px
+
+#content
+  margin-top: 20px
+  margin-bottom: 20px
 
 @import header.sass
 @import front-page/banner.sass
diff --git a/site/index.html b/site/index.html
index 0cd9146..7cb2a4a 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,6 +1,6 @@
       <section class="main-text">
         <div class="container">
-          <p class="main-text__title">VyOS is a fully open source, enterprise-grade router platform. Being open source and community-driven is not a liability for us, not an early stage gimmick we want to shed—it’s our distinctive advantage. VyOS started as a community fork of a discontinued Vyatta Core project in 2013, with a promise to live up to free and open source software values. We kept the promise and turned VyOS into a successful, self-funded project. </p>
+          <p>VyOS is a fully open source, enterprise-grade router platform. Being open source and community-driven is not a liability for us, not an early stage gimmick we want to shed—it’s our distinctive advantage. VyOS started as a community fork of a discontinued Vyatta Core project in 2013, with a promise to live up to free and open source software values. We kept the promise and turned VyOS into a successful, self-funded project. </p>
         </div>
       </section>
 
@@ -90,8 +90,8 @@
       <section class="bottom-text">
         <div class="container">
           <div class="bottom-text__inner">
-            <h2 class="bottom-text__title">Funding model</h2>
-            <p class="bottom text__subtitle">VyOS is funded through cloud marketplace images, prebuilt LTS image subscriptions, and support/consulting services.</p>
+            <h2>Funding model</h2>
+            <p>VyOS is funded through cloud marketplace images, prebuilt LTS image subscriptions, and support/consulting services.</p>
           </div>
         </div>
       </section>
diff --git a/templates/main.html b/templates/main.html
index 9292d1b..d9f5c82 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -12,7 +12,6 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="/css/main.css">
-    <link rel="stylesheet" href="/css/fixup.css">
   </head>
   <body>
     
@@ -53,7 +52,9 @@
 
 
     <main>
-      <div id="content"><!-- content is automatically inserted here --></div>
+      <div class="container small" id="content">
+        <!-- content is automatically inserted here -->
+      </div>
     </main>
 
     <footer>
-- 
cgit v1.2.3


From b2bd4ca0d550a5c7287a04793ea9f7739c5b16df Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:05:14 +0200
Subject: Fix some initial styling on main page

---
 sass/front-page/bottom-text.sass | 8 ++++----
 sass/front-page/main-text.sass   | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
index 60b83d6..54ac45d 100644
--- a/sass/front-page/bottom-text.sass
+++ b/sass/front-page/bottom-text.sass
@@ -1,10 +1,11 @@
 @import ../settings.sass
 
-section.bottom-text
-  div.bottom-text__inner
+.bottom-text
+  &__inner
     padding: 138px 0 182px
     max-width: 657px
     margin-left: auto
+    text-align: center
     margin-right: auto
     +resp(lg)
       padding: 138px 250px 182px
@@ -14,6 +15,5 @@ section.bottom-text
       padding: 56px 50px 64px
     +resp(esm)
       padding: 56px 20px 64px
-    h2.bottom-text__title
-      text-align: center
+    h2
       padding-bottom: 25px
\ No newline at end of file
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
index 2534165..170c866 100644
--- a/sass/front-page/main-text.sass
+++ b/sass/front-page/main-text.sass
@@ -5,6 +5,7 @@ section.main-text
   margin-left: auto
   margin-right: auto
   padding: 143px 0
+  text-align: center
   +resp(lg)
     padding: 143px 0
   +resp(md)
-- 
cgit v1.2.3


From 495a964d3b03177c156eab6640514e433f3e4010 Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:05:34 +0200
Subject: Remove all references to Lato font

---
 sass/footer.sass                    | 4 ----
 sass/front-page/banner.sass         | 2 --
 sass/front-page/inform-columns.sass | 2 --
 sass/header.sass                    | 2 --
 sass/main.sass                      | 5 +----
 sass/settings.sass                  | 2 --
 6 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/sass/footer.sass b/sass/footer.sass
index d386160..68f3640 100644
--- a/sass/footer.sass
+++ b/sass/footer.sass
@@ -63,7 +63,6 @@ footer
             list-style: none
             a
               list-style: none
-              font-family: $lato
               font-weight: normal
               font-size: 16px
               line-height: 230%
@@ -97,7 +96,6 @@ footer
         display: flex
         align-items: center
         p
-          font-family: $lato
           font-weight: normal
           font-size: 13px
           line-height: 16px
@@ -109,7 +107,6 @@ footer
       div.footer__rights
         display: flex
         p, a
-          font-family: $lato
           font-weight: normal
           font-size: 15px
           line-height: 150%
@@ -142,7 +139,6 @@ footer
           justify-content: space-between
         div.footer__sm__developer
           p, a
-            font-family: $lato
             font-weight: normal
             font-size: 13px
             line-height: 16px
diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
index 8cbea55..1e924c2 100644
--- a/sass/front-page/banner.sass
+++ b/sass/front-page/banner.sass
@@ -20,7 +20,6 @@ section.banner
       margin-bottom: 23px
       max-width: 100%
     h1.banner__title
-      font-family: $lato
       font-weight: 800
       font-size: 45px
       line-height: 120%
@@ -52,7 +51,6 @@ section.banner
         margin-top: 23px
         align-items: center
         justify-content: center
-        font-family: $lato
         font-weight: 900
         font-size: 16px
         line-height: 15px
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
index a12befa..bc55f9d 100644
--- a/sass/front-page/inform-columns.sass
+++ b/sass/front-page/inform-columns.sass
@@ -30,7 +30,6 @@ section.inform-columns
           padding-right: 19px
         div.inform-column__title
           h3
-            font-family: $lato
             font-weight: bold
             font-size: 28px
             line-height: 150%
@@ -65,7 +64,6 @@ section.inform-columns
           justify-content: center
           background: $orange
           border: 1px solid $orange
-          font-family: $lato
           font-weight: 900
           font-size: 16px
           line-height: 15px
diff --git a/sass/header.sass b/sass/header.sass
index c409dab..0ae1105 100644
--- a/sass/header.sass
+++ b/sass/header.sass
@@ -28,7 +28,6 @@ header
         +resp(lg)
           margin-right: 16px
       div.header__text
-        font-family: $lato
         font-weight: 500
         font-size: 16px
         line-height: 25px
@@ -53,7 +52,6 @@ header
       +resp(sm)
         display: none
       a
-        font-family: $lato
         font-weight: 600
         font-size: 15px
         line-height: 14px
diff --git a/sass/main.sass b/sass/main.sass
index 6e409f8..f2d2453 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -1,8 +1,7 @@
 @import settings.sass
-@import fonts.sass
 
 body
-  font-family: $lato, sans-serif
+  font-family: sans-serif
   margin: 0
   color: $black
 
@@ -10,14 +9,12 @@ h1, h2, h3, h4, h5, p, ul, li
   margin: 0
 
 h2
-  font-family: $lato
   font-weight: 800
   font-size: 38px
   line-height: 140%
   +resp(sm)
     font-size: 24px
 p
-  font-family: $lato
   font-weight: normal
   font-size: 18px
   line-height: 180%
diff --git a/sass/settings.sass b/sass/settings.sass
index 136578d..9cf5631 100644
--- a/sass/settings.sass
+++ b/sass/settings.sass
@@ -1,5 +1,3 @@
-// fonts
-$lato : "Lato", "Arial", sans-serif
 // colors
 $white : #ffffff
 $orange : #FFBE12
-- 
cgit v1.2.3


From 2abeb67fc9bdb066ada8eb5689a4c91b88dbec71 Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:05:52 +0200
Subject: Update Inform Columns section styling after font updates

---
 sass/front-page/inform-columns.sass |  19 +++---
 site/index.html                     | 122 ++++++++++++++++++------------------
 2 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
index bc55f9d..9d6c3cc 100644
--- a/sass/front-page/inform-columns.sass
+++ b/sass/front-page/inform-columns.sass
@@ -1,6 +1,7 @@
 @import ../settings.sass
 
 section.inform-columns
+
   div.inform-column__inner
     display: grid
     grid-template-columns: 1fr 1fr
@@ -17,6 +18,7 @@ section.inform-columns
       grid-gap: 40px
       padding: 48px 54px 59px
       +resp(md)
+        grid-gap: 25px
         padding: 30px 25px
       +resp(sm)
         padding: 30px 24px 40px
@@ -43,6 +45,8 @@ section.inform-columns
           text-align: left
           margin-bottom: 29px
           font-size: 16px
+          +resp(md)
+            margin-bottom: 20px
           &:last-child
             margin-bottom: 10px
             +resp(sm)
@@ -56,24 +60,23 @@ section.inform-columns
         +resp(sm)
           align-self: end
         a.inform-column__btn
-          max-width: 311px
-          width: 100%
-          height: 58px
+          max-width: 291px
+          padding: 10px
+          min-height: 38px
           display: flex
           align-items: center
           justify-content: center
+          text-align: center
           background: $orange
           border: 1px solid $orange
-          font-weight: 900
+          font-weight: 700
           font-size: 16px
-          line-height: 15px
           color: $black
           text-decoration: none
           transition: 0.3s
+          line-height: 1.5
           +resp(sm)
-            height: 38px
-            width: 100%
+            min-height: 28px
             font-size: 14px
-            line-height: 96%
           &:hover
             background: $white
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index 7cb2a4a..b8acf86 100644
--- a/site/index.html
+++ b/site/index.html
@@ -5,85 +5,83 @@
       </section>
 
       <section class="inform-columns">
-        <div class="container">
-          <div class="inform-column__inner">
+        <div class="inform-column__inner">
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-source.svg" alt="Open Source" title="Open Source">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Source</h3>
-                </div>
-              </div>
-              <div class="inform-column__data">
-                <p>VyOS is fully open source and we encourage everyone to build images and report any build process issues. The source code of the rolling release and LTS branches alike is available online. However, simply making code available is not enough.</p>
-                <p>We also keep the complete build toolchain available, and we strive to make it easy to use. You can build a VyOS image in just a few commands. There is no special maintainer toolchain we keep to ourselves: all image build tools are available to everyone interested.</p>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-source.svg" alt="Open Source" title="Open Source">
               </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Learn how to build a VyOS image</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Source</h3>
               </div>
             </div>
+            <div class="inform-column__data">
+              <p>VyOS is fully open source and we encourage everyone to build images and report any build process issues. The source code of the rolling release and LTS branches alike is available online. However, simply making code available is not enough.</p>
+              <p>We also keep the complete build toolchain available, and we strive to make it easy to use. You can build a VyOS image in just a few commands. There is no special maintainer toolchain we keep to ourselves: all image build tools are available to everyone interested.</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Learn how to build a VyOS image</a>
+            </div>
+          </div>
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-proccess.svg" alt="Open Process" title="Open Process">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Process</h3>
-                </div>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-proccess.svg" alt="Open Process" title="Open Process">
               </div>
-              <div class="inform-column__data">
-                <p>Our issue tracker is available online. There is no private issue tracker: even issues reported by commercial users through the support portal are registered in the public tracker (except security issues before public disclosure of course).</p>
-                <p>Everyone is free to browse open tasks, test them, fix them, and make pull requests.</p>
-                <p>We do not have any contributor agreements that require you to transfer your copyrights to us. The copyright is shared between all contributors. This means no one can make a closed source fork of VyOS—not even its current maintainers.</p>
-              </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Read contributing guidelines</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Process</h3>
               </div>
             </div>
+            <div class="inform-column__data">
+              <p>Our issue tracker is available online. There is no private issue tracker: even issues reported by commercial users through the support portal are registered in the public tracker (except security issues before public disclosure of course).</p>
+              <p>Everyone is free to browse open tasks, test them, fix them, and make pull requests.</p>
+              <p>We do not have any contributor agreements that require you to transfer your copyrights to us. The copyright is shared between all contributors. This means no one can make a closed source fork of VyOS—not even its current maintainers.</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Read contributing guidelines</a>
+            </div>
+          </div>
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-platform.svg" alt="Open Platform" title="Open Platform">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Platform</h3>
-                </div>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-platform.svg" alt="Open Platform" title="Open Platform">
               </div>
-              <div class="inform-column__data">
-                <p>VyOS is not just a product, but an open platform. It uses a layered architecture with unified and documented internal APIs.</p>
-                <p>A number of major features were contributed by community members. Command definitions are written in a machine-verifiable XML format and malformed definitions fail the build. Our new code is in legacy-free Python3, and some core components are in OCaml.</p>
-                <p>Every part of the system is open to contributions.</p>
-              </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Read about VyOS architecture</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Platform</h3>
               </div>
             </div>
+            <div class="inform-column__data">
+              <p>VyOS is not just a product, but an open platform. It uses a layered architecture with unified and documented internal APIs.</p>
+              <p>A number of major features were contributed by community members. Command definitions are written in a machine-verifiable XML format and malformed definitions fail the build. Our new code is in legacy-free Python3, and some core components are in OCaml.</p>
+              <p>Every part of the system is open to contributions.</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Read about VyOS architecture</a>
+            </div>
+          </div>
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-community.svg" alt="Open Community" title="Open Community">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Community</h3>
-                </div>
-              </div>
-              <div class="inform-column__data">
-                <p> We welcome all contributors. Even if you are not a programmer, there are many things to do: testing, documentation, evangelism and so on.</p>
-                <p>Since you are sharing your time and effort with us to make the project better, we are also happy to share our LTS release maintenance effort with you. Every active contributor can get access to prebuilt LTS images.</p>
-                <p>We also issue contributor badges through YourAcclaim that you can put on your CV. Already a contributor?</p>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-community.svg" alt="Open Community" title="Open Community">
               </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Claim your rewards</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Community</h3>
               </div>
             </div>
-
+            <div class="inform-column__data">
+              <p> We welcome all contributors. Even if you are not a programmer, there are many things to do: testing, documentation, evangelism and so on.</p>
+              <p>Since you are sharing your time and effort with us to make the project better, we are also happy to share our LTS release maintenance effort with you. Every active contributor can get access to prebuilt LTS images.</p>
+              <p>We also issue contributor badges through YourAcclaim that you can put on your CV. Already a contributor?</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Claim your rewards</a>
+            </div>
           </div>
+
         </div>
       </section>
 
-- 
cgit v1.2.3


From 8f59708d56255764f9077d07ac847457996f29d6 Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:06:10 +0200
Subject: Update Inform Columns section styling after font updates

---
 sass/front-page/main-text.sass | 2 +-
 site/index.html                | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
index 170c866..d4cb662 100644
--- a/sass/front-page/main-text.sass
+++ b/sass/front-page/main-text.sass
@@ -11,4 +11,4 @@ section.main-text
   +resp(md)
     padding: 90px 0
   +resp(sm)
-    padding: 34px 0 64px
\ No newline at end of file
+    padding: 34px 0 55px
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index b8acf86..91d4d55 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,7 +1,5 @@
       <section class="main-text">
-        <div class="container">
-          <p>VyOS is a fully open source, enterprise-grade router platform. Being open source and community-driven is not a liability for us, not an early stage gimmick we want to shed—it’s our distinctive advantage. VyOS started as a community fork of a discontinued Vyatta Core project in 2013, with a promise to live up to free and open source software values. We kept the promise and turned VyOS into a successful, self-funded project. </p>
-        </div>
+        <p>VyOS is a fully open source, enterprise-grade router platform. Being open source and community-driven is not a liability for us, not an early stage gimmick we want to shed—it’s our distinctive advantage. VyOS started as a community fork of a discontinued Vyatta Core project in 2013, with a promise to live up to free and open source software values. We kept the promise and turned VyOS into a successful, self-funded project. </p>
       </section>
 
       <section class="inform-columns">
-- 
cgit v1.2.3


From 1ddba21a965656d676f9a35125d83f5777be782d Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:06:26 +0200
Subject: Improve footer styling + fix minor bugs after the Lato font was
 deleted

---
 sass/footer.sass    | 75 +++++++++++++++++++++++++++++++++--------------------
 templates/main.html | 20 +++++++-------
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/sass/footer.sass b/sass/footer.sass
index 68f3640..0c9faf1 100644
--- a/sass/footer.sass
+++ b/sass/footer.sass
@@ -37,42 +37,58 @@ footer
 
         div.footer__column
           display: grid
-          grid-template-rows: 50px 1fr
-          margin-right: 80px
-          &:last-child
-            margin-right: 0
+          grid-template-rows: auto 1fr
+          margin-right: 48px
           +resp(lg)
-            margin-right: 32px
+            margin-right: 28px
           +resp(md)
-            width: 50%
             margin: 0 0 30px
             grid-template-rows: 34px 1fr
-          h3.footer__links-title
-            font-weight: 600
-            font-size: 21px
-            color: $black
+          &:nth-child(1)
+            +resp(lg)
+              width: 16%
+            +resp(md)
+              width: 40%
+          &:nth-child(2)
+            +resp(lg)
+              width: 18%
+            +resp(md)
+              width: 60%
+          &:nth-child(3)
+            +resp(lg)
+              width: 20%
+            +resp(md)
+              width: 40%
+          &:nth-child(4)
+            margin-right: 0
             +resp(lg)
-              line-height: 50px
+              width: 32%
             +resp(md)
-              line-height: 150%
-              font-size: 16px
-              margin-bottom: 0px
+              width: 60%
 
-          ul.footer__links-item
+          h3
+            font-weight: 600
+            font-size: 18px
+            padding: 0 0 17px 0
+            color: $black
+
+          ul
             padding-left: 0
             list-style: none
-            a
-              list-style: none
-              font-weight: normal
-              font-size: 16px
-              line-height: 230%
-              color: #747577
-              text-decoration: none
-              +resp(md)
-                font-size: 14px
-              &:hover
-                color: $orange
-                text-decoration: underline
+            li
+              padding: 5px 0
+              a
+                list-style: none
+                font-weight: normal
+                font-size: 16px
+                line-height: 1.7
+                color: #747577
+                text-decoration: none
+                +resp(md)
+                  font-size: 14px
+                &:hover
+                  color: $orange
+                  text-decoration: underline
 
       div.footer__trustpilot
         justify-self: end
@@ -104,6 +120,7 @@ footer
           +resp(md)
             padding-right: 8px
             display: none
+
       div.footer__rights
         display: flex
         p, a
@@ -154,4 +171,6 @@ footer
               &:hover
                 text-decoration: underline
               &:first-child
-                margin-right: 20px
\ No newline at end of file
+                margin-right: 20px
+          div.footer__sm__rights
+            text-align: center
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index d9f5c82..d11e2e0 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -49,8 +49,6 @@
       <a href="#">COMMERCIAL SERVICES</a>
     </nav>
 
-
-
     <main>
       <div class="container small" id="content">
         <!-- content is automatically inserted here -->
@@ -89,30 +87,30 @@
           <div class="footer__links-trustpilot">
             <div class="footer__links">
               <div class="footer__column">
-                <h3 class="footer__links-title">Get VyOS</h3>
-                <ul class="footer__links-item">
+                <h3>Get VyOS</h3>
+                <ul>
                   <li><a href="/nightly-builds">Nightly builds</a></li>
                   <li><a href="/snapshots">Snapshots</a></li>
                   <li><a href="/lts">LTS release</a></li>
                 </ul>
               </div>
               <div class="footer__column">
-                <h3 class="footer__links-title">Contribute</h3>
-                <ul class="footer__links-item">
+                <h3>Contribute</h3>
+                <ul>
                   <li><a href="/contribute">Contributing guidelines</a></li>
                   <li><a href="https://github.com/vyos">Code on GitHub</a></li>
                   <li><a href="https://phabricator.vyos.net/maniphest">Open tasks</a></li>
                 </ul>
               </div>
               <div class="footer__column">
-                <h3 class="footer__links-title">Report a Bug</h3>
-                <ul class="footer__links-item">
+                <h3>Report a Bug</h3>
+                <ul>
                   <li><a href="https://phabricator.vyos.net/">Bug Tracker</a></li>
                 </ul>
               </div>
               <div class="footer__column">
-                <h3 class="footer__links-title">Commercial Services</h3>
-                <ul class="footer__links-item">
+                <h3>Commercial Services</h3>
+                <ul>
                   <li><a href="https://vyos.io/subscriptions/support/">Commercial supports</a></li>
                   <li><a href="https://vyos.io/subscriptions/software/">LTS release subscriptions</a></li>
                   <li><a href="http://vyos.io/contact-us/">Custom development and consulting</a></li>
@@ -190,7 +188,7 @@
                   <a href='https://www.vyos.io/terms-and-conditions'>Terms & Conditions</a>
                 </div>
                 <div class="footer__sm__rights">
-                  <p>© 2020 vyos.io. All rights reserved.</p>
+                  <p>© 2021 vyos.io. All rights reserved.</p>
                 </div>
               </div>
 
-- 
cgit v1.2.3


From cecb62c1faed83f0ab7c05735e50cdcdb792e148 Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:06:45 +0200
Subject: Minor banner section CSS updates after the Lato font was deleted

---
 sass/front-page/banner.sass | 10 +++++-----
 templates/banner.html       | 18 +++++++++---------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
index 1e924c2..878b9c9 100644
--- a/sass/front-page/banner.sass
+++ b/sass/front-page/banner.sass
@@ -14,12 +14,12 @@ section.banner
       padding: 0
   div.banner__text-button
     max-width: 50%
-    +resp(lg)
-      max-width: 61%
+    +resp(md)
+      max-width: 60%
     +resp(sm)
       margin-bottom: 23px
       max-width: 100%
-    h1.banner__title
+    h1
       font-weight: 800
       font-size: 45px
       line-height: 120%
@@ -41,7 +41,7 @@ section.banner
         justify-content: center
         padding-left: 20px
         padding-right: 20px
-      a.banner__btn
+      a
         max-width: 311px
         width: 100%
         height: 58px
@@ -51,7 +51,7 @@ section.banner
         margin-top: 23px
         align-items: center
         justify-content: center
-        font-weight: 900
+        font-weight: 700
         font-size: 16px
         line-height: 15px
         color: $white
diff --git a/templates/banner.html b/templates/banner.html
index 02b12e4..28ca769 100644
--- a/templates/banner.html
+++ b/templates/banner.html
@@ -1,10 +1,10 @@
-    <section class="banner">
-      <div class="container sm-none">
-        <div class="banner__text-button">
-          <h1 class="banner__title">VyOS. The universal router.</h1>
-          <div class="banner__btn_container">
-            <a href="#" class="banner__btn">Learn about the project</a>
-          </div>
-        </div>
+<section class="banner">
+  <div class="container sm-none">
+    <div class="banner__text-button">
+      <h1>VyOS. The universal router.</h1>
+      <div class="banner__btn_container">
+        <a href="#">Learn about the project</a>
       </div>
-    </section>
+    </div>
+  </div>
+</section>
\ No newline at end of file
-- 
cgit v1.2.3


From 47f7a980b946cbbedba59a7e14682dd0ce2bd984 Mon Sep 17 00:00:00 2001
From: Andrii-Moshenskyi <andrii.moshenskyi@gmail.com>
Date: Thu, 21 Jan 2021 13:06:59 +0200
Subject: Last minor changes

---
 sass/front-page/banner.sass         |   8 -
 sass/front-page/bottom-text.sass    |  10 +-
 sass/front-page/inform-columns.sass |   1 +
 sass/front-page/main-text.sass      |   8 +-
 sass/main.sass                      |  63 ++-
 site/css/main.css                   | 736 ++++++++++++++++++++++++++++++++++++
 site/img/global/list-element.svg    |   6 +
 7 files changed, 816 insertions(+), 16 deletions(-)
 create mode 100644 site/css/main.css
 create mode 100644 site/img/global/list-element.svg

diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
index 878b9c9..51b6bcf 100644
--- a/sass/front-page/banner.sass
+++ b/sass/front-page/banner.sass
@@ -20,20 +20,12 @@ section.banner
       margin-bottom: 23px
       max-width: 100%
     h1
-      font-weight: 800
-      font-size: 45px
-      line-height: 120%
-      letter-spacing: 0.02em
-      color: $black
       padding-bottom: 57px
       +resp(sm)
-        font-size: 38px
         text-align: center
         padding-bottom: 51%
         padding-left: 20px
         padding-right: 20px
-      +resp(esm)
-        font-size: 28px
     div.banner__btn_container
       +resp(sm)
         background-color: $white
diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
index 54ac45d..943c4b6 100644
--- a/sass/front-page/bottom-text.sass
+++ b/sass/front-page/bottom-text.sass
@@ -16,4 +16,12 @@
     +resp(esm)
       padding: 56px 20px 64px
     h2
-      padding-bottom: 25px
\ No newline at end of file
+      padding-bottom: 25px
+      +resp(sm)
+        padding-bottom: 0
+    p
+      font-size: 18px
+      +resp(sm)
+        font-size: 16px
+      +resp(esm)
+        font-size: 14px
\ No newline at end of file
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
index 9d6c3cc..250982f 100644
--- a/sass/front-page/inform-columns.sass
+++ b/sass/front-page/inform-columns.sass
@@ -63,6 +63,7 @@ section.inform-columns
           max-width: 291px
           padding: 10px
           min-height: 38px
+          color: #18191C !important
           display: flex
           align-items: center
           justify-content: center
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
index d4cb662..c3b4fdd 100644
--- a/sass/front-page/main-text.sass
+++ b/sass/front-page/main-text.sass
@@ -11,4 +11,10 @@ section.main-text
   +resp(md)
     padding: 90px 0
   +resp(sm)
-    padding: 34px 0 55px
\ No newline at end of file
+    padding: 0 0 55px
+  p
+    font-size: 18px
+    +resp(sm)
+      font-size: 16px
+    +resp(esm)
+      font-size: 14px
\ No newline at end of file
diff --git a/sass/main.sass b/sass/main.sass
index f2d2453..ece16ef 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -8,18 +8,28 @@ body
 h1, h2, h3, h4, h5, p, ul, li
   margin: 0
 
+h1
+  font-weight: 800
+  font-size: 45px
+  line-height: 120%
+  letter-spacing: 0.02em
+  color: $black
+  +resp(sm)
+    font-size: 32px
+  +resp(esm)
+    font-size: 28px
 h2
   font-weight: 800
-  font-size: 38px
+  font-size: 32px
   line-height: 140%
   +resp(sm)
-    font-size: 24px
+    font-size: 21px
 p
   font-weight: normal
-  font-size: 18px
   line-height: 180%
+  font-size: 16px
   color: $black
-  +resp(sm)
+  +resp(esm)
     font-size: 14px
   @supports (hyphens: auto)
     text-align: justify
@@ -38,8 +48,49 @@ div.container
     max-width: 1000px
 
 #content
-  margin-top: 20px
-  margin-bottom: 20px
+  padding-top: 60px
+  padding-bottom: 50px
+  +resp(sm)
+    padding-top: 40px
+    padding-bottom: 20px
+  +resp(esm)
+    padding-top: 30px
+  h1
+    margin-bottom: 25px
+    +resp(esm)
+      margin-bottom: 15px
+  h2
+    margin-top: 25px
+    margin-bottom: 20px
+    +resp(esm)
+      margin-top: 20px
+      margin-bottom: 15px
+  p
+    margin: 15px 0
+    +resp(esm)
+      margin: 9px 0
+  ul
+    +resp(sm)
+      padding-left: 25px
+    +resp(esm)
+      padding-left: 15px
+    li
+      list-style: none
+      display: flex
+      align-items: center
+      margin: 12px 0
+      line-height: 150%
+      +resp(esm)
+        font-size: 14px
+        margin: 10px 0
+      &:before
+        margin-top: 4px
+        margin-right: 10px
+        content: url('../img/global/list-element.svg')
+  a
+    color: $dark-orange
+    &:hover
+      text-decoration: none
 
 @import header.sass
 @import front-page/banner.sass
diff --git a/site/css/main.css b/site/css/main.css
new file mode 100644
index 0000000..67dbe75
--- /dev/null
+++ b/site/css/main.css
@@ -0,0 +1,736 @@
+body {
+  font-family: sans-serif;
+  margin: 0;
+  color: #18191C; }
+
+h1, h2, h3, h4, h5, p, ul, li {
+  margin: 0; }
+
+h1 {
+  font-weight: 800;
+  font-size: 45px;
+  line-height: 120%;
+  letter-spacing: 0.02em;
+  color: #18191C; }
+  @media only screen and (max-width: 767px) {
+    h1 {
+      font-size: 32px; } }
+  @media only screen and (max-width: 575px) {
+    h1 {
+      font-size: 28px; } }
+
+h2 {
+  font-weight: 800;
+  font-size: 32px;
+  line-height: 140%; }
+  @media only screen and (max-width: 767px) {
+    h2 {
+      font-size: 21px; } }
+
+p {
+  font-weight: normal;
+  line-height: 180%;
+  font-size: 16px;
+  color: #18191C; }
+  @media only screen and (max-width: 575px) {
+    p {
+      font-size: 14px; } }
+  @supports ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
+    p {
+      text-align: justify;
+      -webkit-hyphens: auto;
+          -ms-hyphens: auto;
+              hyphens: auto; } }
+
+pre, code, sample {
+  white-space: pre-wrap;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none; }
+
+div.container {
+  max-width: 1340px;
+  margin: 0 auto;
+  padding-left: 15px;
+  padding-right: 15px; }
+  div.container.small {
+    max-width: 1000px; }
+
+#content {
+  padding-top: 60px;
+  padding-bottom: 50px; }
+  @media only screen and (max-width: 767px) {
+    #content {
+      padding-top: 40px;
+      padding-bottom: 20px; } }
+  @media only screen and (max-width: 575px) {
+    #content {
+      padding-top: 30px; } }
+  #content h1 {
+    margin-bottom: 25px; }
+    @media only screen and (max-width: 575px) {
+      #content h1 {
+        margin-bottom: 15px; } }
+  #content h2 {
+    margin-top: 25px;
+    margin-bottom: 20px; }
+    @media only screen and (max-width: 575px) {
+      #content h2 {
+        margin-top: 20px;
+        margin-bottom: 15px; } }
+  #content p {
+    margin: 15px 0; }
+    @media only screen and (max-width: 575px) {
+      #content p {
+        margin: 9px 0; } }
+  @media only screen and (max-width: 767px) {
+    #content ul {
+      padding-left: 25px; } }
+  @media only screen and (max-width: 575px) {
+    #content ul {
+      padding-left: 15px; } }
+  #content ul li {
+    list-style: none;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    margin: 12px 0;
+    line-height: 150%; }
+    @media only screen and (max-width: 575px) {
+      #content ul li {
+        font-size: 14px;
+        margin: 10px 0; } }
+    #content ul li:before {
+      margin-top: 4px;
+      margin-right: 10px;
+      content: url("../img/global/list-element.svg"); }
+  #content a {
+    color: #FD8F01; }
+    #content a:hover {
+      text-decoration: none; }
+
+header {
+  background: #ffffff;
+  -webkit-box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07);
+          box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07);
+  padding: 20px 0;
+  position: relative; }
+  @media only screen and (max-width: 991px) {
+    header {
+      padding: 15px 0;
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+      z-index: 2; } }
+  @media only screen and (max-width: 575px) {
+    header {
+      padding: 10px 0; } }
+  header div.header__inner {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+    @media only screen and (max-width: 767px) {
+      header div.header__inner {
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+            -ms-flex-align: center;
+                align-items: center; } }
+    header div.header__inner div.header__logo-side {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+      header div.header__inner div.header__logo-side a.header__logo {
+        display: inherit;
+        margin-right: 30px; }
+        @media only screen and (max-width: 1199px) {
+          header div.header__inner div.header__logo-side a.header__logo {
+            margin-right: 16px; } }
+      header div.header__inner div.header__logo-side div.header__text {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 25px; }
+        @media only screen and (max-width: 767px) {
+          header div.header__inner div.header__logo-side div.header__text {
+            display: none; } }
+        header div.header__inner div.header__logo-side div.header__text p {
+          font-size: 16px;
+          color: #ACACAD;
+          text-align: left; }
+          @media only screen and (max-width: 991px) {
+            header div.header__inner div.header__logo-side div.header__text p {
+              display: none; } }
+    header div.header__inner div.header__links-side {
+      display: grid;
+      grid-template-columns: 1fr auto auto auto;
+      grid-gap: 31px;
+      justify-items: center;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+      @media only screen and (max-width: 1199px) {
+        header div.header__inner div.header__links-side {
+          grid-gap: 20px;
+          text-align: center; } }
+      @media only screen and (max-width: 767px) {
+        header div.header__inner div.header__links-side {
+          display: none; } }
+      header div.header__inner div.header__links-side a {
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 14px;
+        text-transform: uppercase;
+        text-decoration: none;
+        color: #18191C;
+        -webkit-transition: 0.3s;
+        -o-transition: 0.3s;
+        transition: 0.3s; }
+        @media only screen and (max-width: 1199px) {
+          header div.header__inner div.header__links-side a {
+            font-size: 14px; } }
+        header div.header__inner div.header__links-side a:hover {
+          color: #FFBE12; }
+    header div.header__inner div.header__mobile-menu__buttons {
+      height: 100%;
+      width: 30px;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      display: none; }
+      @media only screen and (max-width: 767px) {
+        header div.header__inner div.header__mobile-menu__buttons {
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: -ms-flexbox;
+          display: flex; } }
+      header div.header__inner div.header__mobile-menu__buttons img {
+        cursor: pointer;
+        display: none; }
+      header div.header__inner div.header__mobile-menu__buttons img.active {
+        display: block; }
+
+nav#mobile-menu {
+  z-index: 1;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  position: fixed;
+  left: 100%;
+  background-color: #ffffff;
+  padding: 70px 15px; }
+  @media only screen and (max-width: 575px) {
+    nav#mobile-menu {
+      padding: 60px 15px; } }
+  nav#mobile-menu a {
+    display: block;
+    text-transform: uppercase;
+    color: #18191C;
+    text-decoration: none;
+    padding: 15px 0;
+    font-weight: 600;
+    -webkit-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+    border-bottom: 1px solid #e0e0e0; }
+    nav#mobile-menu a:hover {
+      color: #FFBE12; }
+
+section.banner {
+  background-image: url("/img/front-page/banner/banner-bg.svg");
+  background-position: bottom;
+  background-repeat: no-repeat;
+  -webkit-background-size: cover;
+          background-size: cover;
+  padding: 77px 0 87px; }
+  @media only screen and (max-width: 767px) {
+    section.banner {
+      background-image: url("/img/front-page/banner/banner-bg-sm.svg");
+      padding: 45px 0 0; } }
+  @media only screen and (max-width: 767px) {
+    section.banner div.sm-none {
+      padding: 0; } }
+  section.banner div.banner__text-button {
+    max-width: 50%; }
+    @media only screen and (max-width: 991px) {
+      section.banner div.banner__text-button {
+        max-width: 60%; } }
+    @media only screen and (max-width: 767px) {
+      section.banner div.banner__text-button {
+        margin-bottom: 23px;
+        max-width: 100%; } }
+    section.banner div.banner__text-button h1 {
+      padding-bottom: 57px; }
+      @media only screen and (max-width: 767px) {
+        section.banner div.banner__text-button h1 {
+          text-align: center;
+          padding-bottom: 51%;
+          padding-left: 20px;
+          padding-right: 20px; } }
+    @media only screen and (max-width: 767px) {
+      section.banner div.banner__text-button div.banner__btn_container {
+        background-color: #ffffff;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        padding-left: 20px;
+        padding-right: 20px; } }
+    section.banner div.banner__text-button div.banner__btn_container a {
+      max-width: 311px;
+      width: 100%;
+      height: 58px;
+      background: #18191C;
+      border: 1px solid #18191C;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      margin-top: 23px;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 15px;
+      color: #ffffff;
+      text-decoration: none;
+      -webkit-transition: 0.3s;
+      -o-transition: 0.3s;
+      transition: 0.3s; }
+      @media only screen and (max-width: 767px) {
+        section.banner div.banner__text-button div.banner__btn_container a {
+          height: 38px;
+          font-size: 14px; } }
+      section.banner div.banner__text-button div.banner__btn_container a:hover {
+        background: #ffffff;
+        color: #18191C; }
+
+section.main-text {
+  max-width: 884px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 143px 0;
+  text-align: center; }
+  @media only screen and (max-width: 1199px) {
+    section.main-text {
+      padding: 143px 0; } }
+  @media only screen and (max-width: 991px) {
+    section.main-text {
+      padding: 90px 0; } }
+  @media only screen and (max-width: 767px) {
+    section.main-text {
+      padding: 0 0 55px; } }
+  section.main-text p {
+    font-size: 18px; }
+    @media only screen and (max-width: 767px) {
+      section.main-text p {
+        font-size: 16px; } }
+    @media only screen and (max-width: 575px) {
+      section.main-text p {
+        font-size: 14px; } }
+
+section.inform-columns div.inform-column__inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 23px 30px; }
+  @media only screen and (max-width: 1199px) {
+    section.inform-columns div.inform-column__inner {
+      grid-gap: 20px; } }
+  @media only screen and (max-width: 1199px) and (max-width: 767px) {
+    section.inform-columns div.inform-column__inner {
+      grid-template-columns: 1fr; } }
+  section.inform-columns div.inform-column__inner div.inform-column__item {
+    background: #F3F4F4;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 40px;
+    padding: 48px 54px 59px; }
+    @media only screen and (max-width: 991px) {
+      section.inform-columns div.inform-column__inner div.inform-column__item {
+        grid-gap: 25px;
+        padding: 30px 25px; } }
+    @media only screen and (max-width: 767px) {
+      section.inform-columns div.inform-column__inner div.inform-column__item {
+        padding: 30px 24px 40px;
+        grid-gap: 15px;
+        grid-template-rows: auto 1fr 65px; } }
+    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__icon {
+        padding-right: 19px; }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 {
+        font-weight: bold;
+        font-size: 28px;
+        line-height: 150%;
+        letter-spacing: 0.02em;
+        color: #000000; }
+        @media only screen and (max-width: 767px) {
+          section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 {
+            font-size: 21px; } }
+    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
+      text-align: left;
+      margin-bottom: 29px;
+      font-size: 16px; }
+      @media only screen and (max-width: 991px) {
+        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
+          margin-bottom: 20px; } }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child {
+        margin-bottom: 10px; }
+        @media only screen and (max-width: 767px) {
+          section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child {
+            margin-bottom: 0; } }
+      @media only screen and (max-width: 767px) {
+        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
+          line-height: 180%;
+          font-size: 14px;
+          margin-bottom: 25px; } }
+    @media only screen and (max-width: 767px) {
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button {
+        -webkit-align-self: end;
+            -ms-flex-item-align: end;
+                align-self: end; } }
+    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn {
+      max-width: 291px;
+      padding: 10px;
+      min-height: 38px;
+      color: #18191C !important;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      text-align: center;
+      background: #FFBE12;
+      border: 1px solid #FFBE12;
+      font-weight: 700;
+      font-size: 16px;
+      color: #18191C;
+      text-decoration: none;
+      -webkit-transition: 0.3s;
+      -o-transition: 0.3s;
+      transition: 0.3s;
+      line-height: 1.5; }
+      @media only screen and (max-width: 767px) {
+        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn {
+          min-height: 28px;
+          font-size: 14px; } }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn:hover {
+        background: #ffffff; }
+
+.bottom-text__inner {
+  padding: 138px 0 182px;
+  max-width: 657px;
+  margin-left: auto;
+  text-align: center;
+  margin-right: auto; }
+  @media only screen and (max-width: 1199px) {
+    .bottom-text__inner {
+      padding: 138px 250px 182px; } }
+  @media only screen and (max-width: 991px) {
+    .bottom-text__inner {
+      padding: 90px 50px 126px; } }
+  @media only screen and (max-width: 767px) {
+    .bottom-text__inner {
+      padding: 56px 50px 64px; } }
+  @media only screen and (max-width: 575px) {
+    .bottom-text__inner {
+      padding: 56px 20px 64px; } }
+  .bottom-text__inner h2 {
+    padding-bottom: 25px; }
+    @media only screen and (max-width: 767px) {
+      .bottom-text__inner h2 {
+        padding-bottom: 0; } }
+  .bottom-text__inner p {
+    font-size: 18px; }
+    @media only screen and (max-width: 767px) {
+      .bottom-text__inner p {
+        font-size: 16px; } }
+    @media only screen and (max-width: 575px) {
+      .bottom-text__inner p {
+        font-size: 14px; } }
+
+footer div.footer__inner div.footer__logo-society {
+  display: grid;
+  grid-template-columns: 60px 1fr 191px;
+  grid-gap: 25px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__logo-society {
+      display: none; } }
+  footer div.footer__inner div.footer__logo-society div.footer__hr {
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center; }
+    footer div.footer__inner div.footer__logo-society div.footer__hr img {
+      margin-bottom: 10px;
+      width: 100%; }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__logo-society div.footer__hr img {
+          border-bottom: 1px solid #E0DFDF; } }
+  footer div.footer__inner div.footer__logo-society div.footer__socials {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    padding-left: 6px; }
+
+footer div.footer__inner div.footer__links-trustpilot {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-top: 36px; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__links-trustpilot {
+      display: none; } }
+  footer div.footer__inner div.footer__links-trustpilot div.footer__links {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; }
+    @media only screen and (max-width: 991px) {
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links {
+        -webkit-flex-wrap: wrap;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap; } }
+    footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      margin-right: 48px; }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
+          margin-right: 28px; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
+          margin: 0 0 30px;
+          grid-template-rows: 34px 1fr; } }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) {
+          width: 16%; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) {
+          width: 40%; } }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) {
+          width: 18%; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) {
+          width: 60%; } }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) {
+          width: 20%; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) {
+          width: 40%; } }
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) {
+        margin-right: 0; }
+        @media only screen and (max-width: 1199px) {
+          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) {
+            width: 32%; } }
+        @media only screen and (max-width: 991px) {
+          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) {
+            width: 60%; } }
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3 {
+        font-weight: 600;
+        font-size: 18px;
+        padding: 0 0 17px 0;
+        color: #18191C; }
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul {
+        padding-left: 0;
+        list-style: none; }
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li {
+          padding: 5px 0; }
+          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a {
+            list-style: none;
+            font-weight: normal;
+            font-size: 16px;
+            line-height: 1.7;
+            color: #747577;
+            text-decoration: none; }
+            @media only screen and (max-width: 991px) {
+              footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a {
+                font-size: 14px; } }
+            footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a:hover {
+              color: #FFBE12;
+              text-decoration: underline; }
+  footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot {
+    justify-self: end;
+    border-left: 1px solid #E0DFDF;
+    padding-left: 33px; }
+    @media only screen and (max-width: 1199px) {
+      footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot {
+        padding-left: 10px; } }
+    footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot div#tp-widget-wrapper {
+      margin: 0; }
+
+footer div.footer__inner div.footer__developer {
+  border-top: 1px solid #E0DFDF;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 40px 0;
+  margin-top: 37px; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__developer {
+      display: none; } }
+  footer div.footer__inner div.footer__developer div.footer__hosted {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center; }
+    footer div.footer__inner div.footer__developer div.footer__hosted p {
+      font-weight: normal;
+      font-size: 13px;
+      line-height: 16px;
+      color: #ACACAD;
+      padding-right: 16px; }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__developer div.footer__hosted p {
+          padding-right: 8px;
+          display: none; } }
+  footer div.footer__inner div.footer__developer div.footer__rights {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; }
+    footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a {
+      font-weight: normal;
+      font-size: 15px;
+      line-height: 150%;
+      text-decoration: none;
+      color: #ACACAD;
+      padding-right: 30px; }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a {
+          font-size: 14px;
+          padding-right: 22px; } }
+    footer div.footer__inner div.footer__developer div.footer__rights a:hover {
+      text-decoration: underline;
+      color: #FFBE12; }
+
+footer div.footer__inner div.footer__sm {
+  display: none; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__sm {
+      display: block; } }
+  footer div.footer__inner div.footer__sm div.footer__sm__contant {
+    border-top: 1px solid #ACACAD;
+    padding: 32px 0 23px; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__logos {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -webkit-justify-content: space-between;
+          -ms-flex-pack: justify;
+              justify-content: space-between;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__society {
+      max-width: 200px;
+      margin: 24px auto 17px;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -webkit-justify-content: space-between;
+          -ms-flex-pack: justify;
+              justify-content: space-between; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer p, footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer a {
+      font-weight: normal;
+      font-size: 13px;
+      line-height: 16px;
+      color: #747577;
+      opacity: 0.5; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      margin-bottom: 19px; }
+      footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a {
+        text-decoration: none;
+        -webkit-transition: 0.3s;
+        -o-transition: 0.3s;
+        transition: 0.3s; }
+        footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:hover {
+          text-decoration: underline; }
+        footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:first-child {
+          margin-right: 20px; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__rights {
+      text-align: center; }
diff --git a/site/img/global/list-element.svg b/site/img/global/list-element.svg
new file mode 100644
index 0000000..e97525e
--- /dev/null
+++ b/site/img/global/list-element.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.79 3.75805H12.24V7.25805H15V0.998047H6.79V3.75805Z" fill="#FFBE12"/>
+<path d="M4.26 0.998047H0V7.20805H2.76V3.75805H4.26V0.998047Z" fill="#FFBE12"/>
+<path d="M2.76 9.73805H0V15.998H8.21V13.238H2.76V9.73805Z" fill="#FFBE12"/>
+<path d="M10.74 13.238V15.998H15V9.78805H12.24V13.238H10.74Z" fill="#FFBE12"/>
+</svg>
-- 
cgit v1.2.3