added content cards and picture with text section. also added hero section

components/hero-section.css

@@ -1,28 +1,56 @@
 
 
 .hero-main {
-    width: 100%;
-    height: 400px;
+  width: 100%;
+  min-height: 400px;
 }
 
-.hero-left {
-    width: 50%;
+.hero-picture-stack {
+  position: relative;
+  width: 50%;
+  min-height: 320px;
+  flex-shrink: 0;
 }
 
 .hero-right {
-    width: 50%;
-    padding-left: 20px;
+  width: 50%;
+  padding-left: 20px;
 }
 
 .hero-picture {
-    border-radius: 20px;
-    position: absolute;
-    width: 20%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 70%;
+  max-width: 280px;
+  height: auto;
+  border-radius: 20px;
+  object-fit: cover;
+  transform: translate(-50%, -50%);
+}
+
+.hero-picture--tilt-20 {
+  transform: translate(-50%, -50%) rotate(20deg);
+}
+
+.hero-picture--tilt-40 {
+  transform: translate(-50%, -50%) rotate(40deg);
 }
 
 @media (max-width: 750px) {
-    .hero-right {
-        width: 100%;
-        padding-top: 20px;
-    }
+  .hero-picture-stack {
+    width: 100%;
+    min-height: 260px;
+  }
+
+  .hero-picture {
+    width: 75%;
+    max-width: 240px;
+  }
+
+  .hero-right {
+    width: 100%;
+    padding-left: 0;
+    padding-top: 60px;
+  }
 }