add min height to footer img and add large size

.lh/.lhignore

@@ -0,0 +1,6 @@
+# list file to not track by the local-history extension. comment line starts with a '#' character
+# each line describe a regular expression pattern (search for 'Javascript regex')
+# it will relate to the workspace directory root. for example:
+# '.*\.txt' ignores any file with 'txt' extension
+# '/test/.*' ignores all the files under the 'test' directory
+# '.*/test/.*' ignores all the files under any 'test' directory (even under sub-folders)

.lh/src/styles/blocks/_main.scss.json

@@ -0,0 +1,126 @@
+{
+    "sourceFile": "src/styles/blocks/_main.scss",
+    "activeCommit": 0,
+    "commits": [
+        {
+            "activePatchIndex": 27,
+            "patches": [
+                {
+                    "date": 1708352197445,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n"
+                },
+                {
+                    "date": 1708352209049,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    width: 100%;\n+    // width: 100%;\n     height: 200px;\n   }\n \n   @include for-l-mobile {\n"
+                },
+                {
+                    "date": 1708352215312,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,8 +3,9 @@\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     // width: 100%;\n     height: 200px;\n+    back\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708352237320,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,9 +3,9 @@\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     // width: 100%;\n     height: 200px;\n-    back\n+    background-position: center;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708352356754,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    // width: 100%;\n+    width: 100%;\n     height: 200px;\n     background-position: center;\n   }\n \n"
+                },
+                {
+                    "date": 1708353111495,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,9 +2,8 @@\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     width: 100%;\n-    height: 200px;\n     background-position: center;\n   }\n \n   @include for-l-mobile {\n"
+                },
+                {
+                    "date": 1708353132191,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -0,0 +1,30 @@\n+.main {\n+  padding: 64px 20px;\n+  font-family: \"Space Mono\", Arial, sans-serif;\n+  &__img {\n+    width: 100%;\n+    height: 200px;\n+    background-position: center;\n+  }\n+\n+  @include for-l-mobile {\n+    padding: 72px;\n+  }\n+\n+  @include for-desktop {\n+    padding: 120px;\n+    &__img {\n+      width: 100%;\n+    }\n+  }\n+\n+  &__container {\n+    margin: 48px 0;\n+\n+    @include for-desktop {\n+      display: grid;\n+      grid-template-columns: repeat(3, 1fr);\n+      gap: 20px;\n+    }\n+  }\n+}\n"
+                },
+                {
+                    "date": 1708353141883,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -27,33 +27,4 @@\n       gap: 20px;\n     }\n   }\n }\n-.main {\n-  padding: 64px 20px;\n-  font-family: \"Space Mono\", Arial, sans-serif;\n-  &__img {\n-    width: 100%;\n-    background-position: center;\n-  }\n-\n-  @include for-l-mobile {\n-    padding: 72px;\n-  }\n-\n-  @include for-desktop {\n-    padding: 120px;\n-    &__img {\n-      width: 100%;\n-    }\n-  }\n-\n-  &__container {\n-    margin: 48px 0;\n-\n-    @include for-desktop {\n-      display: grid;\n-      grid-template-columns: repeat(3, 1fr);\n-      gap: 20px;\n-    }\n-  }\n-}\n"
+                },
+                {
+                    "date": 1708353165657,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,9 +2,9 @@\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     width: 100%;\n-    height: 200px;\n+    height: auto;\n     background-position: center;\n   }\n \n   @include for-l-mobile {\n"
+                },
+                {
+                    "date": 1708353394432,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,11 +1,9 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    width: 100%;\n-    height: auto;\n-    background-position: center;\n+    width: \n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708353416281,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    width: \n+    height: 200px;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708353438644,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,8 +2,9 @@\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     height: 200px;\n+    width: 320px;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708353572145,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,8 +3,9 @@\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     height: 200px;\n     width: 320px;\n+    object-fit: ;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708353586962,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,9 +3,8 @@\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     height: 200px;\n     width: 320px;\n-    object-fit: ;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708354954625,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,8 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    height: 200px;\n     width: 320px;\n   }\n \n   @include for-l-mobile {\n"
+                },
+                {
+                    "date": 1708354959917,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,8 +2,9 @@\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     width: 320px;\n+    min-height: 200px;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708354964984,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -0,0 +1,30 @@\n+.main {\n+  padding: 64px 20px;\n+  font-family: \"Space Mono\", Arial, sans-serif;\n+  &__img {\n+    width: 320px;\n+    min-height: 200px;\n+    min-width: 320px;\n+  }\n+\n+  @include for-l-mobile {\n+    padding: 72px;\n+  }\n+\n+  @include for-desktop {\n+    padding: 120px;\n+    &__img {\n+      width: 100%;\n+    }\n+  }\n+\n+  &__container {\n+    margin: 48px 0;\n+\n+    @include for-desktop {\n+      display: grid;\n+      grid-template-columns: repeat(3, 1fr);\n+      gap: 20px;\n+    }\n+  }\n+}\n"
+                },
+                {
+                    "date": 1708354993668,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    width: 320px;\n+    width: 100%;\n     min-height: 200px;\n     min-width: 320px;\n   }\n \n@@ -27,33 +27,4 @@\n       gap: 20px;\n     }\n   }\n }\n-.main {\n-  padding: 64px 20px;\n-  font-family: \"Space Mono\", Arial, sans-serif;\n-  &__img {\n-    width: 320px;\n-    min-height: 200px;\n-  }\n-\n-  @include for-l-mobile {\n-    padding: 72px;\n-  }\n-\n-  @include for-desktop {\n-    padding: 120px;\n-    &__img {\n-      width: 100%;\n-    }\n-  }\n-\n-  &__container {\n-    margin: 48px 0;\n-\n-    @include for-desktop {\n-      display: grid;\n-      grid-template-columns: repeat(3, 1fr);\n-      gap: 20px;\n-    }\n-  }\n-}\n"
+                },
+                {
+                    "date": 1708356656566,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    width: 100%;\n+    height: auto;\n     min-height: 200px;\n     min-width: 320px;\n   }\n \n"
+                },
+                {
+                    "date": 1708356679172,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,8 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    height: auto;\n     min-height: 200px;\n     min-width: 320px;\n   }\n \n"
+                },
+                {
+                    "date": 1708356688896,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,8 +3,9 @@\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     min-height: 200px;\n     min-width: 320px;\n+    width: 100%;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708357022669,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,11 +1,9 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    min-height: 200px;\n-    min-width: 320px;\n-    width: 100%;\n+width: 100%;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708357095854,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -0,0 +1,30 @@\n+.main {\n+  padding: 64px 20px;\n+  font-family: \"Space Mono\", Arial, sans-serif;\n+  &__img {\n+    min-height: 200px;\n+    min-width: 320px;\n+    width: 100%;\n+  }\n+\n+  @include for-l-mobile {\n+    padding: 72px;\n+  }\n+\n+  @include for-desktop {\n+    padding: 120px;\n+    &__img {\n+      width: 100%;\n+    }\n+  }\n+\n+  &__container {\n+    margin: 48px 0;\n+\n+    @include for-desktop {\n+      display: grid;\n+      grid-template-columns: repeat(3, 1fr);\n+      gap: 20px;\n+    }\n+  }\n+}\n"
+                },
+                {
+                    "date": 1708357140191,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,10 +1,8 @@\n .main {\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n-    min-height: 200px;\n-    min-width: 320px;\n     width: 100%;\n   }\n \n   @include for-l-mobile {\n@@ -27,32 +25,4 @@\n       gap: 20px;\n     }\n   }\n }\n-.main {\n-  padding: 64px 20px;\n-  font-family: \"Space Mono\", Arial, sans-serif;\n-  &__img {\n-width: 100%;\n-  }\n-\n-  @include for-l-mobile {\n-    padding: 72px;\n-  }\n-\n-  @include for-desktop {\n-    padding: 120px;\n-    &__img {\n-      width: 100%;\n-    }\n-  }\n-\n-  &__container {\n-    margin: 48px 0;\n-\n-    @include for-desktop {\n-      display: grid;\n-      grid-template-columns: repeat(3, 1fr);\n-      gap: 20px;\n-    }\n-  }\n-}\n"
+                },
+                {
+                    "date": 1708357186460,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,8 +2,9 @@\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     width: 100%;\n+    min-height: \n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708357235747,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,9 +2,10 @@\n   padding: 64px 20px;\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     width: 100%;\n-    min-height: \n+    min-height: 200px;\n+    background\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708357249360,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,9 +3,9 @@\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     width: 100%;\n     min-height: 200px;\n-    background\n+    background-size: cover;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                },
+                {
+                    "date": 1708357278474,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,9 +3,8 @@\n   font-family: \"Space Mono\", Arial, sans-serif;\n   &__img {\n     width: 100%;\n     min-height: 200px;\n-    background-size: cover;\n   }\n \n   @include for-l-mobile {\n     padding: 72px;\n"
+                }
+            ],
+            "date": 1708352197445,
+            "name": "Commit-0",
+            "content": ".main {\n  padding: 64px 20px;\n  font-family: \"Space Mono\", Arial, sans-serif;\n  &__img {\n    width: 100%;\n    height: 200px;\n  }\n\n  @include for-l-mobile {\n    padding: 72px;\n  }\n\n  @include for-desktop {\n    padding: 120px;\n    &__img {\n      width: 100%;\n    }\n  }\n\n  &__container {\n    margin: 48px 0;\n\n    @include for-desktop {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 20px;\n    }\n  }\n}\n"
+        }
+    ]
+}

src/index.html

@@ -174,7 +174,10 @@ <h2 class="title title--secondary" id="gallery">Browse Nothing products by categ
       <button class="button"><p class="text--button">View all</p></button>
     </main>
     <img
-      src="./images/footer-image.png"
+      srcset="./images/footer-image-small.jpg 320w, ./images/footer-image-large.png 1260w"
+      src="./images/footer-image-small.jpg"
+      sizes="(max-width: 1260px) 320px
+          1260px"
       alt="footer img unknown"
       class="main__img"
     >

src/styles/blocks/_main.scss

@@ -3,6 +3,7 @@
   font-family: "Space Mono", Arial, sans-serif;
   &__img {
     width: 100%;
+    min-height: 200px;
   }
 
   @include for-l-mobile {