working form

public/style.css

@@ -114,12 +114,22 @@ header.hero {
 }
 
 .hero-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 40px; /* space between text and widget */
   max-width: 80%;
   margin: 0 auto;
   padding-top: 200px;
   padding-bottom: 150px;
 }
+.hero-left {
+  flex: 1; /* text column grows */
+}
 
+.hero-right {
+  flex: 0 0 420px; /* fixed width for widget */
+}
 header.hero h1 {
   font-size: 3rem;
   margin-bottom: 20px;
@@ -890,4 +900,4 @@ footer a:hover {
 /* Hover effect for card badges */
 .blog-teaser > [class*="-tag"]:hover {
   opacity: 0.9;
-}
+}