fix: footer

src/widgets/footer/styles.module.scss

@@ -1,3 +1,210 @@
 .Footer {
+  display: flex;
+  flex-direction: column;
+}
 
+.Container {
+  &_green {
+    background: #007c6f;
+  }
+
+  &_gray {
+    background: #3d3d3d;
+  }
+}
+
+.Grid {
+  margin: 0 auto;
+  width: 1540px;
+  padding: 40px 0 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  ///grid-template-rows: 1fr 1fr;
+  grid-auto-columns: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "about linksa linksb linksc"
+    "contacts contacts social social";
+
+  .About {
+    grid-area: about;
+
+    .Image {
+      margin-bottom: 20px;
+    }
+
+    .Description {
+      font-family: $font-roboto;
+      font-weight: $font-regular;
+      font-size: 20px;
+      line-height: 160%;
+      color: $color-white;
+    }
+  }
+
+  .LinksA {
+    grid-area: linksa;
+    padding: 10px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .List {
+      @extend %list;
+    }
+
+    .ListItem {
+      @extend %list-item;
+    }
+  }
+
+  .LinksB {
+    grid-area: linksb;
+    padding: 10px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .List {
+      @extend %list;
+    }
+
+    .ListItem {
+      @extend %list-item;
+    }
+  }
+
+  .LinksC {
+    grid-area: linksc;
+    padding: 10px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .List {
+      @extend %list;
+    }
+
+    .ListItem {
+      @extend %list-item;
+    }
+  }
+
+  .Contacts {
+    grid-area: contacts;
+
+    .Title {
+      @extend %title;
+    }
+
+    .Icons {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 24px;
+
+      .IconBox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+
+        .Icon {
+          border-radius: 50%;
+          width: 48px;
+          height: 48px;
+          padding: 8px;
+          background: $color-white;
+        }
+
+        .Text {
+          @extend %icon-desc;
+        }
+      }
+    }
+  }
+
+  .Social {
+    grid-area: social;
+    padding-left: 200px;
+
+    .Title {
+      @extend %title;
+    }
+
+    .Row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .Icon {
+
+    }
+  }
+}
+
+.Bottom {
+  margin: 0 auto;
+  width: 1540px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 16px 0;
+
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 16px;
+  line-height: 100%;
+  color: $color-white;
+
+  & a {
+    text-decoration: none;
+    color: $color-link-hover;
+    margin: 0 8px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+%title {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 20px;
+  line-height: 100%;
+  color: $color-white;
+  margin-bottom: 20px;
+}
+
+%list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  list-style: disc;
+}
+
+%list-item {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 16px;
+  line-height: 130%;
+  color: $color-white;
+  margin-left: 20px;
+}
+
+%icon-desc {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: 18px;
+  line-height: 100%;
+  color: $color-white;
+  margin-bottom: 20px;
 }