fix: fix expandable card visual

Author: andsonjosef

libs/common-docs/src/components/expandable-card/expandable-card.component.html

@@ -1,28 +1,32 @@
 <div class="lg:flex flex-column justify-between gap-4">
   <div *ngFor="let card of cards; let i = index" class="bg-grey lg:py-10 py-6 px-6 lg:mb-0 mb-4"
     [style.flex]="card.isExpanded ? '2.5' : '1'" (click)="selectCard(i)">
-    <div class="lg:flex-auto lg:flex flex-column justify-between align-center h-full items-center"
-      *ngIf="card.isExpanded">
+    <div class="lg:flex-auto lg:flex flex-col justify-between align-center h-full items-center" *ngIf="card.isExpanded">
       <div [@enterBigCard]>
-        <img [src]="card.imgSource" class="block lg:hidden w-2/4 h-2/4 md:w-1/3 lg:w-2/4 lg:h-2/4 md:h-1/3 m-auto mb-6" alt="slide img">
-        <h3 [innerHTML]="card.title" class="lg:text-large text-2xl text-light_title_col leading-28 lg:leading-44 mb-8">
-        </h3>
-        <ul class="list-disc text-grey_font_col pl-5 ">
-          <li *ngFor="let item of card.list" class="mb-4 ">{{item}}</li>
-        </ul>
-        <button class="flex justify-center lg:justify-between mt-10 w-full lg:w-auto">
-          <a [routerLink]="['articles']" class="btn-pink flex justify-center w-full">Visit blog <img
-              src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
-        </button>
-      </div>
-      <div class="hidden lg:block max-w-140 lg:max-w-full mb-6 lg:mb-0 h-full">
-        <img [src]="card.imgSource" class="w-full h-full" alt="slide img">
+        <div class="flex flex-row items-center">
+          <div class="flex-col">
+            <img [src]="card.imgSource"
+              class="block lg:hidden w-2/4 h-2/4 md:w-1/3 lg:w-2/4 lg:h-2/4 md:h-1/3 m-auto mb-6" alt="slide img">
+            <h3 [innerHTML]="card.title"
+              class="lg:text-large text-2xl text-light_title_col leading-28 lg:leading-44 mb-8">
+            </h3>
+            <ul class="list-disc text-grey_font_col pl-5 ">
+              <li *ngFor="let item of card.list" class="mb-4 ">{{item}}</li>
+            </ul>
+            <button class="flex justify-center lg:justify-between mt-10 w-full lg:w-auto">
+              <a [routerLink]="['articles']" class="btn-pink flex justify-center w-full">Visit blog <img
+                  src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+            </button>
+          </div>
+          <div class="hidden lg:block max-w-140 lg:max-w-full mb-6 lg:mb-0 h-full">
+            <img [src]="card.imgSource" class="w-full h-full" alt="slide img">
+          </div>
+        </div>
       </div>
     </div>
-
-    <div class="flex justify-between align-center md:h-full h-106 items-center gap-6"
-      *ngIf="!card.isExpanded" (click)="selectCard(i)" [@enterSmallCard]>
-      <div class="max-w-140 md:max-w-full mb-6 md:h-1/2 w-1/2 md:w-1/4 m-auto ">
+    <div class="flex justify-between align-center md:h-full h-106 items-center gap-6" *ngIf="!card.isExpanded"
+      (click)="selectCard(i)" [@enterSmallCard]>
+      <div class="lg:hidden block max-w-140 md:max-w-full mb-6 md:h-1/2 w-1/2 md:w-1/4 m-auto ">
         <img [src]="card.imgSource" class="w-full m-auto h-106" alt="slide img">
       </div>
       <div class="md:h-1/2 ">