<div class="bg-white shadow-md border border-primary rounded-lg mb-4 p-4 max-h-80 min-h-80 overflow-hidden flex flex-col flex-wrap">
  <img class="rounded-t-lg float-left max-h-32 min-h-32 object-contain {{expanded ? 'object-left max-w-32' : ''}}" ngSrc="{{job?.image}}" alt="" width="300" height="100" loading="lazy">
  <h5 class="text-gray-900 text-xl tracking-tight mb-2 justify-left" *ngIf="expanded">{{job?.name}} <br/> <em class="text-lg"><i>{{job?.role}}</i></em></h5>
  <div class="flex {{expanded ? 'max-w-96 flex-col -ml-1/5' : 'items-center'}} flex-1">
      <h5 class="text-gray-900 text-xl tracking-tight mb-2 justify-left" *ngIf="!expanded">{{job?.name}} <br/> <em class="text-lg"><i>{{job?.role}}</i></em></h5>
      <div class="font-normal text-gray-700 mb-3" *ngIf="expanded" [innerHTML]="job?.description"></div>
      <a *ngIf="expanded" class="text-sm px-6 py-2 rounded-full font-bold
                      ring-white text-white bg-secondary ring-2
                      cursor-pointer
                      text-center
                      max-w-48
                      self-end
                      hover:ring-accent hover:text-accent hover:bg-transparent hover:ring-2"
       href="{{job?.website}}" target="_blank">
        Visit Website
      </a>
    </div>
    <div class="flex items-center justify-center flex-1" *ngIf="!expanded" >
      <a class="text-sm px-6 py-2 rounded-full font-bold relative ring-white text-white bg-secondary ring-2
                        hover:ring-accent hover:text-accent hover:bg-transparent hover:ring-2
                        cursor-pointer"
        (click)="expand.emit()">
        Show more
      </a>
    </div>
</div>

