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;
   }
 }

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss

@@ -80,7 +80,6 @@
 
   &__variant-selectors ::ng-deep .variant-selector__select {
     flex: 1 1 0;
-    width: 0;
     min-width: 0;
   }
 
@@ -114,6 +113,16 @@
 @media (max-width: 767.98px) {
   .product-vertical-with-cart-card {
     border-color: var(--color-primary, var(--tenant-primary, #009933));
+
+    &__title {
+      color: var(--color-primary, var(--tenant-primary, #009933));
+      font-size: 15px;
+    }
+
+    &__description {
+      font-size: 13px;
+      font-weight: 400;
+    }
   }
 }
 

src/app/shared/components/variant-selector/variant-selector.component.scss

@@ -38,3 +38,21 @@
     font-size: 11px;
   }
 }
+
+@media (max-width: 767.98px) {
+  .variant-selector {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: 100%;
+  }
+
+  .variant-selector__select {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+
+    &:first-child:nth-last-child(odd) {
+      grid-column: 1 / -1;
+    }
+  }
+}