fix: Stretched feature images on mobile (#157)

Author: Krzemien97

src/data/features.tsx

@@ -20,7 +20,7 @@ const FEATURES: FeatureItem[] = [
       width: 2000,
       height: 1300,
       hyperlink: 'leo-rover',
-      style: { width: 'auto', height: 260, paddingBottom: 20, marginTop: 40 },
+      style: { width: 'auto', height: 260, marginTop: 40 },
     },
     text: (
       <span>
@@ -36,7 +36,7 @@ const FEATURES: FeatureItem[] = [
       width: 2000,
       height: 1500,
       hyperlink: 'raph-rover',
-      style: { width: 'auto', height: 300, paddingBottom: 20 },
+      style: { width: 'auto', height: 300 },
     },
     text: (
       <span>

src/pages/index.module.css

@@ -88,11 +88,17 @@
 
 .featureImage {
   padding: 10px;
+  object-fit: contain;
+  object-position: bottom;
+  padding-bottom: 20px;
 }
 
 @media screen and (max-width: 996px) {
   .featureContainer {
     margin-left: auto;
     margin-right: auto;
   }
+  .featureImage {
+    margin: 0 !important;
+  }
 }