diff --git a/style.css b/style.css
index a86a2ec..f7f8251 100644
--- a/style.css
+++ b/style.css
@@ -81,16 +81,15 @@ nav > div {
 
 .hero {
     max-width: var(--max-content-width);
-    height: 800px;
 
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
     gap: 2rem;
+    padding: 2rem;
 
     @media (max-width: 768px) {
-        gap: 0;
         grid-template-columns: 1fr;
-        padding-bottom: 4rem;
         & > :last-child {
             grid-row: 1;
         }
@@ -136,11 +135,16 @@ nav > div {
         max-width: var(--max-content-width);
         margin: 0 auto;
         padding: 2rem;
+        gap: 2rem;
         display: grid;
-        grid-template-columns: 60% 40%;
-        gap: 1rem;
+        grid-template-columns: 6fr 4fr;
         align-items: center;
 
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr;
+
+        }
+
         & :first-child {
             width: 100%;
             display: grid;
@@ -152,7 +156,7 @@ nav > div {
                 border-radius: var(--border-radius);
                 position: relative;
 
-
+                border: 8px solid var(--surface-container-low);
             }
 
             & div:first-child > img {