Merge branch 'main' of https://github.com/ElizabethBil/project-13

src/css/footer.css

@@ -1,3 +1,8 @@
+.footer-section {
+  padding-top: 40px;
+  border-top: 1px solid rgba(252, 249, 249, 0.1);
+}
+
 .footer-list {
   display: flex;
   flex-wrap: wrap;
@@ -14,27 +19,41 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 18px;
+  line-height: 1.28;
   text-transform: uppercase;
 }
 
 .footer-title {
   color: var(--white, #fcf9f9);
   font-size: 44px;
-  line-height: 1.22em;
+  line-height: 1.22;
   letter-spacing: -0.03em;
+  font-weight: 400;
 
   /* Box model */
   width: 335px;
   margin-bottom: 80px;
 }
 
+.footer-section {
+  background-image: url(/img/footer/bg-footer-mob.png);
+  background-repeat: no-repeat;
+  background-position: bottom;
+  padding-bottom: 216px;
+  background-size: 375px 212px;
+}
+
 @media screen and (min-width: 768px) {
+  .footer-section {
+    background-image: url(/img/footer/bg-footer-tab.png);
+    background-position: top right;
+    padding-bottom: 0;
+    background-size: 178px 369px;
+  }
   .footer-list {
     display: flex;
     flex-wrap: nowrap;
     gap: 25px;
-    margin-bottom: 80px;
   }
 
   .footer-list-item {
@@ -43,8 +62,13 @@
   }
 
   .footer-title {
+    /* typography */
+    font-size: 54px;
+    line-height: 1.18;
+
     /* Box model */
     width: 521px;
+    margin-bottom: 0;
   }
 
   .footer-container {
@@ -53,15 +77,64 @@
 }
 
 @media screen and (min-width: 1280px) {
+  .footer-section {
+    background-image: url(/img/footer/bg-footer-1280.png);
+    background-position: top right;
+    padding-bottom: 0;
+    background-size: 336px 363px;
+  }
+
   .footer-list {
     margin-bottom: 117px;
   }
 
   .footer-title {
+    /* typography */
+    font-size: 64px;
+    line-height: 1.15;
     /* Box model */
     width: 754px;
   }
 }
 
 @media screen and (min-width: 1440px) {
+  .footer-section {
+    background-image: url(/img/footer/bg-footer-1440.png);
+    background-position: top right;
+    padding-bottom: 0;
+    background-size: 496px 363px;
+  }
+}
+
+/* ##### Background image x2 ##### */
+@media screen and (min-resolution: 192dpi) and (max-width: 767px),
+  screen and (min-resolution: 2dppx) and (max-width: 767px),
+  screen and (min-device-pixel-ratio: 2) and (max-width: 767px) {
+  .collection-section {
+    background-image: url(/img/footer/[email protected]);
+  }
+}
+
+@media screen and (min-resolution: 192dpi) and (min-width: 768px),
+  screen and (min-resolution: 2dppx) and (min-width: 768px),
+  screen and (min-device-pixel-ratio: 2) and (min-width: 768px) {
+  .collection-section {
+    background-image: url(/img/footer/[email protected]);
+  }
+}
+
+@media screen and (min-resolution: 192dpi) and (min-width: 1280px),
+  screen and (min-resolution: 2dppx) and (min-width: 1280px),
+  screen and (min-device-pixel-ratio: 2) and (min-width: 1280px) {
+  .collection-section {
+    background-image: url(/img/footer/[email protected]);
+  }
+}
+
+@media screen and (min-resolution: 192dpi) and (min-width: 1440px),
+  screen and (min-resolution: 2dppx) and (min-width: 1440px),
+  screen and (min-device-pixel-ratio: 2) and (min-width: 1440px) {
+  .collection-section {
+    background-image: url(/img/footer/[email protected]);
+  }
 }