<mat-card *ngFor="let card of cards" class="card-button">
  <div class="image-container" [routerLink]="['', card.route]">
    <img [src]="card.image" alt="Images of Card" class="static" />
    <img [src]="card.gif" alt="Images of Card" class="gif" />
  </div>
  <mat-card-content>
    <p class="nav-card-title">{{ card.title }}</p>
    <p class="section-card-description">{{ card.description }}</p>
  </mat-card-content>
</mat-card>

./section-card.component.scss

:host {
  display: flex;
  flex-direction: row;
  line-height: normal;
  flex-wrap: wrap;
  justify-content: space-between;

  .mat-mdc-card {
    padding: 0rem;
    // background: white;
  }

  mat-card-content {
    padding: 2.21875rem 2rem;
  }

  .card-button {
    flex-direction: column;
    margin-bottom: 2rem;
    cursor: pointer;

    &:hover {
      box-shadow:
        0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2),
        0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.19);
    }

    display: flex;
    height: 28rem;
    width: 37.3125rem;
  }

  .nav-card-title {
    font-size: 1.125rem;
    letter-spacing: 0.5%;
    color: #054f89;
    font-weight: 400;
    line-height: 1.5rem;
    text-decoration: none;
    margin: 0;
    margin-bottom: 0.5rem;
  }

  .section-card-description {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
  }

  .image-container {
    .static,
    .gif {
      width: 99.7%;
      height: 20rem;
      border: solid 1px #e0e0e0;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
    }

    .gif {
      display: none;
    }

    &:hover {
      .static {
        display: none;
      }

      .gif {
        display: unset;
      }
    }
  }

  @media (max-width: 26.75rem) {
    mat-card-content {
      padding: 1.5rem 2rem;
    }

    .card-button {
      width: auto;
      height: auto;
    }

    .image-container {
      .gif:hover,
      .static {
        height: 13rem;
      }
    }
  }
}