Merge pull request #8 from ElizabethBil/collection

css, html update

src/css/collection.css

@@ -4,9 +4,14 @@
   text-align: center;
   margin-bottom: 40px;
 }
+
 /* OUR COLLECTION */
 
-.collection-list {
+.collection-section {
+  background-image: url(../img/collection/bg-ornament-mob.png);
+  background-repeat: no-repeat;
+  background-size: auto;
+  background-position-y: 298px;
 }
 
 .collection-list-item:not(:last-child) {
@@ -15,6 +20,16 @@
 
 .collection-list-img {
   margin-bottom: 18px;
+  border-radius: 4px;
+
+  transition: transform 0.2s,
+    box-shadow 0.5s cubic-bezier(0.28, 0.82, 0.71, 0.94);
+}
+
+.collection-list-img:hover,
+.collection-list-img:focus {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px rgba(236, 217, 121, 0.3);
 }
 
 .collection-list-item-title {
@@ -41,10 +56,74 @@
 }
 
 @media screen and (min-width: 768px) {
+  .collection-section {
+    background-image: url(../img/collection/bg-ornament-tab.png);
+    background-position-y: 72px;
+    padding-top: 0;
+  }
+
+  .collection-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  .collection-list-item {
+    width: calc((100% - 20px) / 2);
+  }
 }
 
 @media screen and (min-width: 1280px) {
+  .collection-section {
+    background-image: url(../img/collection/bg-ornament.png);
+    background-position-y: 232px;
+  }
+
+  .collection-list {
+    gap: 40px 20px;
+  }
+
+  .collection-list-item {
+    width: calc((100% - 40px) / 3);
+  }
 }
 
 @media screen and (min-width: 1440px) {
+  .collection-section {
+    background-image: url(../img/collection/bg-ornament.png);
+    background-position-y: 226px;
+  }
+
+  .collection-list {
+    gap: 40px 20px;
+  }
+
+  .collection-list-item {
+    width: calc((100% - 40px) / 3);
+  }
+}
+
+/* ##### 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/collection/[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/collection/[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/collection/[email protected]);
+  }
 }

src/partials/collection.html

@@ -138,7 +138,7 @@ <h3 class="collection-list-item-title">women's blouse crimea</h3>
       <li class="collection-list-item">
         <picture>
           <source
-            srcset="../
+            srcset="
               ../img/collection/desktop-1440/verkhovina-1440.jpg    400w,
               ../img/collection/desktop-1440/[email protected] 800w,
               ../img/collection/desktop-1280/verkhovina-1280.jpg    347w,