feat: update styles across components for improved layout and responsiveness

src/app/shared/components/hero-banner/hero-banner.component.scss

@@ -78,6 +78,7 @@
   font-size: 25px;
   font-weight: 700;
   letter-spacing: 0.5px;
+  text-transform: uppercase;
 }
 
 .event-details {
@@ -149,9 +150,12 @@
   }
 
   .hero-banner {
+    width: 100vw;
     min-height: 0;
+    margin-inline: calc(50% - 50vw);
     overflow: hidden;
     background-color: #f5f5f5;
+    border-radius: 0 !important;
   }
 
   .hero-media {
@@ -159,7 +163,7 @@
     inset: auto;
     flex: 0 0 auto;
     width: 100%;
-    height: clamp(8.75rem, 44vw, 10.5rem);
+    height: clamp(8.75rem, 44vw, 211px);
     background-position: center center;
     background-size: 140% auto;
     border-radius: 0;
@@ -226,27 +230,28 @@
 
   .event-card-container {
     margin-top: 0;
-    padding: 0 1.25rem 1.2rem;
+    padding: 0 0 1.2rem;
   }
 
   .event-card {
     width: 100%;
-    max-width: 22rem;
+    max-width: none;
     min-height: 11.4rem;
-    padding: 1.75rem 1rem 0.8rem !important;
+    padding: 2.5rem 1.5rem !important;
     border-radius: 0 !important;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04) !important;
   }
 
   .event-title {
-    max-width: 16rem;
     margin: 0 auto 0.85rem !important;
+    font-size: 22px;
     line-height: 1.1;
     letter-spacing: 0;
   }
 
   .event-details {
     gap: 0.45rem !important;
+    font-size: 15px;
     line-height: 1.25;
   }
 
@@ -261,6 +266,7 @@
 
   .event-schedule-toggle {
     margin-top: 1.9rem;
+    font-size: 13px;
   }
 
   .event-schedule-toggle i {
@@ -277,5 +283,6 @@
 
   .event-schedule-value {
     gap: 0.4rem;
+    font-size: 14px;
   }
 }