Layout styles broken in Banner (#399)

Co-authored-by: Sharma <[email protected]>

Author: vishalshrm539

packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.html

@@ -9,7 +9,7 @@ <h1 class="title">{{ title }}</h1>
   </div>
   <div
     [ngClass]="{
-      'psdk-grid-filter-1': this.layout$ === 'two-column',
+      'psdk-grid-filter-2': this.layout$ === 'two-column',
       'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
       'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
     }"

packages/angular-sdk-components/src/lib/_components/designSystemExtension/banner/banner.component.scss

@@ -1,14 +1,14 @@
 .psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
 
 .psdk-grid-filter-2 {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;