1 files changed, 193 insertions, 176 deletions
diff --git a/sass/footer.sass b/sass/footer.sass
index 0c9faf1..aae1e7f 100644
--- a/sass/footer.sass
+++ b/sass/footer.sass
@@ -1,176 +1,193 @@
-@import settings.sass
-  
-footer
-  div.footer__inner
-    
-    div.footer__logo-society
-      display: grid
-      grid-template-columns: 60px 1fr 191px
-      grid-gap: 25px
-      align-items: center
-      +resp(sm)
-        display: none
-      div.footer__hr
-        align-self: center
-        img
-          margin-bottom: 10px
-          width: 100%
-          +resp(md)
-            border-bottom: 1px solid #E0DFDF
-      div.footer__socials
-        display: flex
-        justify-content: space-between
-        align-items: center
-        padding-left: 6px
-
-    div.footer__links-trustpilot
-      display: flex
-      justify-content: space-between
-      margin-top: 36px
-      +resp(sm)
-        display: none
-
-      div.footer__links
-        display: flex
-        +resp(md)
-          flex-wrap: wrap
-
-        div.footer__column
-          display: grid
-          grid-template-rows: auto 1fr
-          margin-right: 48px
-          +resp(lg)
-            margin-right: 28px
-          +resp(md)
-            margin: 0 0 30px
-            grid-template-rows: 34px 1fr
-          &: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)
-              width: 32%
-            +resp(md)
-              width: 60%
-
-          h3
-            font-weight: 600
-            font-size: 18px
-            padding: 0 0 17px 0
-            color: $black
-
-          ul
-            padding-left: 0
-            list-style: none
-            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
-        border-left: 1px solid #E0DFDF
-        padding-left: 33px
-        +resp(lg)
-          padding-left: 10px
-        div#tp-widget-wrapper
-          margin: 0
-
-    div.footer__developer
-      border-top: 1px solid #E0DFDF
-      display: flex
-      justify-content: space-between
-      align-items: center
-      padding: 40px 0
-      margin-top: 37px
-      +resp(sm)
-        display: none
-      div.footer__hosted
-        display: flex
-        align-items: center
-        p
-          font-weight: normal
-          font-size: 13px
-          line-height: 16px
-          color: #ACACAD
-          padding-right: 16px
-          +resp(md)
-            padding-right: 8px
-            display: none
-
-      div.footer__rights
-        display: flex
-        p, a
-          font-weight: normal
-          font-size: 15px
-          line-height: 150%
-          text-decoration: none
-          color: #ACACAD
-          padding-right: 30px
-          +resp(md)
-            font-size: 14px
-            padding-right: 22px
-        a:hover
-          text-decoration: underline
-          color: $orange
-
-    div.footer__sm
-      display: none
-      +resp(sm)
-        display: block
-      
-      div.footer__sm__contant
-        border-top: 1px solid #ACACAD
-        padding: 32px 0 23px
-        div.footer__sm__logos
-          display: flex
-          justify-content: space-between
-          align-items: center
-        div.footer__sm__society
-          max-width: 200px
-          margin: 24px auto 17px
-          display: flex
-          justify-content: space-between
-        div.footer__sm__developer
-          p, a
-            font-weight: normal
-            font-size: 13px
-            line-height: 16px
-            color: #747577
-            opacity: 0.5
-          div.footer__sm__privacy-policy
-            display: flex
-            justify-content: center
-            margin-bottom: 19px
-            a
-              text-decoration: none
-              transition: 0.3s
-              &:hover
-                text-decoration: underline
-              &:first-child
-                margin-right: 20px
-          div.footer__sm__rights
-            text-align: center
-\ No newline at end of file
+@import settings
+
+footer
+  display: flex
+  justify-content: center
+  background-color: $grey-light2
+  +resolution(992)
+    padding-top: 60px
+    padding-bottom: 30px
+  +resolution(576, 991)
+    padding-top: 40px
+    padding-bottom: 30px
+  +resolution(0, 575)
+    padding-top: 30px
+    padding-bottom: 24px
+
+  .inner
+    width: 100%
+
+    .top
+      +resolution(992)
+        display: grid
+        grid-template-columns: auto 1fr
+
+      .sentrium-column
+        display: flex
+        +resolution(0, 575)
+          flex-direction: column
+          align-items: center
+        +resolution(0, 991)
+          width: 100%
+          justify-content: space-between
+          align-items: center
+        +resolution(992)
+          max-width: 227px
+          margin-right: 70px
+          flex-direction: column
+
+        div
+          display: flex
+          +resolution(0, 575)
+            flex-direction: column
+          +resolution(0, 991)
+            align-items: center
+          +resolution(992)
+            flex-direction: column
+
+          img
+            width: 66px
+            height: 46px
+
+          p
+            font-family: $a
+            color: $grey-dark
+            font-weight: 600
+            letter-spacing: $px
+            line-height: 1.4
+            +resolution(992)
+              margin-top: 24px
+            +resolution(576)
+              font-size: 18px
+            +resolution(576, 991)
+              width: 100%
+              max-width: 258px
+            +resolution(0, 991)
+              margin-left: 20px
+            +resolution(0, 575)
+              font-size: 16px
+              margin-top: 14px
+
+        a
+          background-color: $black
+          color: $white
+          font-family: $a
+          letter-spacing: $em
+          font-weight: 700
+          font-size: 14px
+          width: 140px
+          display: flex
+          justify-content: center
+          align-items: center
+          text-decoration: none
+          border-radius: 4px
+          height: 40px
+          +resolution(992)
+            margin-top: 40px
+          +resolution(0, 575)
+            margin-top: 16px
+
+          &:hover
+            background-color: $grey-dark
+
+          &:active
+            background-color: $white
+
+    .links-columns
+      +resolution(0, 991)
+        display: none
+      +resolution(992)
+        display: grid
+        grid-template-columns: 1fr 1fr 1fr 1fr
+
+      .links-column
+
+        h3
+          font-size: 16px
+          color: $black
+          letter-spacing: $em
+
+        ul
+          padding-left: 0
+          margin-top: 24px
+          list-style: none
+
+          li
+            margin-bottom: 12px
+
+            &:nth-last-child(1)
+              margin-bottom: 0
+
+            a
+              font-weight: normal
+              font-size: 16px
+              color: $grey-dark
+              text-decoration: none
+              font-family: $a
+              letter-spacing: $em
+
+              &:hover
+                color: $orange
+                text-decoration: underline
+
+    .bottom
+      display: flex
+      +resolution(992)
+        justify-content: space-between
+        align-items: center
+        margin-top: 43px
+      +resolution(576, 991)
+        margin-top: 30px
+        justify-content: space-between
+        align-items: center
+      +resolution(0, 576)
+        margin-top: 40px
+        justify-content: space-between
+        align-items: center
+        flex-direction: column-reverse
+
+      p
+        font-family: $a
+        font-weight: 400
+        letter-spacing: $em
+        color: $grey-dark2
+        +resolution(992)
+          font-size: 14px
+        +resolution(576, 991)
+          font-size: 16px
+        +resolution(0, 575)
+          font-size: 14px
+          margin-top: 24px
+
+      .social-logos
+        display: grid
+        grid-template-columns: 1fr 1fr 1fr 1fr
+        column-gap: 12px
+
+        a
+          text-decoration: none
+          width: 46px
+          height: 46px
+          display: flex
+          justify-content: center
+          align-items: center
+          background-color: $white
+          transition: outline 250ms linear
+          outline: none
+          border-radius: 2px
+          outline: none
+
+          svg
+            path
+              transition: fill 250ms linear
+
+          &:hover
+            svg
+              path
+                fill: $primary
+          &:active
+            outline: 1px solid $primary
+
+            svg
+              path
+                fill: $secondary