make the image overlay darker for older events on the home page

Author: arpansac

projects/commudle-admin/src/app/components/home/components/home-events/home-events-card/home-events-card.component.html

@@ -4,7 +4,7 @@
     {{registrations}} Registered
   </div> -->
   <div [routerLink]="['/communities', community.slug, 'events', event.slug]" class="home-events-image clickable">
-    <div class="home-events-image-overlay"></div>
+    <div class="home-events-image-overlay" [ngClass]="{'old': moment(event.start_time) < moment()}"></div>
     <img alt="{{event.name}}" src="{{ event.header_image ? event.header_image.i350 : '/assets/images/Home-Events.png'}}">
   </div>
   <div *ngIf="event.start_time" class="home-events-date" [ngClass]="{'old': moment(event.start_time) < moment()}">

projects/commudle-admin/src/app/components/home/components/home-events/home-events-card/home-events-card.component.scss

@@ -33,6 +33,10 @@
       height: 156px;
       width: 100%;
       background: linear-gradient(360deg, rgba(13, 28, 46, 0.29) 0%, rgba(17, 51, 79, 0.1827) 100%);
+
+      &.old {
+        background: linear-gradient(360deg, rgb(13 28 46 / 45%) 0%, rgb(17 51 79 / 30%) 100%);
+      }
     }
 
     img {