Add footer

.editorconfig

@@ -2,4 +2,4 @@
 indent_size = 2
 
 [*.css]
-indent_size = 4
+indent_size = 2

blocks/breadcrumb/breadcrumb.css

@@ -8,6 +8,11 @@
   font-family: rwe-light;
 }
 
+.breadcrumb a:hover,
+.breadcrumb a:active {
+  text-decoration: none;
+}
+
 .breadcrumb ul {
   list-style: none;
   padding: 0;
@@ -32,3 +37,7 @@
   color: var(--white);
   padding: 16px;
 }
+
+.breadcrumb.dark a:any-link {
+  color: var(--white);
+}

blocks/carousel/carousel.css

@@ -1,5 +1,8 @@
 .carousel {
   padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .carousel .carousel-slides-container {

blocks/footer/footer.css

@@ -1,6 +1,6 @@
 footer {
-  background-color: var(--light-color);
-  font-size: var(--body-font-size-xs);
+  background: linear-gradient(225deg, #00a19f, #1d4477);
+  color: var(--white);
 }
 
 footer .footer > div {
@@ -13,6 +13,70 @@ footer .footer p {
   margin: 0;
 }
 
+.footer ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer .footer-main-links {
+  display: flex;
+  flex-direction: row;
+}
+
+.footer .footer-main-links > * {
+  width: 33%;
+}
+
+.footer .footer-main-links .first-section ul {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.footer .footer-main-links .second-section ul {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.footer .footer-main-links .second-section .icon,
+.footer .footer-main-links .second-section img {
+  width: 40px;
+  height: 40px;
+}
+
+.footer .footer-main-links a:any-link {
+  color: #3ed8c3;
+}
+
+.footer .footer-main-links a:hover,
+.footer .footer-main-links a:active {
+  color: var(--white);
+  text-decoration: none;
+}
+
+.footer .third-section .default-content-wrapper {
+  display: flex;
+  padding-top: 32px;
+  color: #8ea1bb;
+}
+
+.footer .third-section .default-content-wrapper a:any-link {
+  color: #8ea1bb;
+}
+
+.footer .third-section .default-content-wrapper ul {
+  display: flex;
+  gap: 16px;
+  flex-grow: 1;
+  margin: 0;
+}
+
+.footer .third-section .default-content-wrapper .icon {
+  width: 56px;
+  margin-left: 16px;
+}
+
 @media (width >= 900px) {
   footer .footer > div {
     padding: 40px 32px 24px;

blocks/footer/footer.js

@@ -16,5 +16,15 @@ export default async function decorate(block) {
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 
+  const [firstSection, secondSection, thirdSection] = footer.querySelectorAll('.section');
+
+  const mainLinksWrapper = document.createElement('div');
+  mainLinksWrapper.classList.add('footer-main-links');
+  firstSection.replaceWith(mainLinksWrapper);
+  mainLinksWrapper.append(firstSection, secondSection);
+  firstSection.classList.add('first-section');
+  secondSection.classList.add('second-section');
+  thirdSection.classList.add('third-section');
+
   block.append(footer);
 }

blocks/header/header.css

@@ -8,6 +8,8 @@
   height: 130px;
   padding: 0 32px;
   color: var(--white);
+  max-width: 1200px;
+  margin: auto;
 }
 
 .header .section {

styles/styles.css

@@ -341,13 +341,23 @@ span.icon-rwe-anchor-right::before {
 }
 
 span.icon-rwe-anchor-left::before {
-  content: ""
+  content: "";
 }
 
 span.icon-rwe-eye::before {
-  content: ""
+  content: "";
 }
 
 .video-block {
   width: 100%;
+}
+
+.top-line > :first-child::before {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background: #adafb1;
+  display: block;
+  margin-bottom: 16px;
+  margin-top: -16px;
 }