Invisible cards in Angular using rawg api

I am trying to get cards to display on my home page for 20 games. But not a singular card shows up at all. If I remove the data interpolation then a card shows up. I'm trying to get the data from the rawg api.

card html

  <div class="row">
  <div class="col-md-3" *ngFor="let game of games">
    <div class="card text-white bg-dark">
      <img src="{{ game.background_image }}" class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">{{ game.name }}</h5>
        <p class="card-text">
          With supporting text below as a natural lead-in to additional content.
        </p>
        <a href="#" class="btn btn-success">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

card ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RawgDataService } from 'src/app/services/rawg-data.service';

@Component({
  selector: 'app-game-cards',
  templateUrl: './game-cards.component.html',
  styleUrls: ['./game-cards.component.css']
})
export class GameCardsComponent implements OnInit {

  public games: any = [];

  constructor(private rawgDataService: RawgDataService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.rawgDataService.getGames().subscribe( response => {this.games = response.data;})
  }

}

app html

<app-navbar></app-navbar>
<app-game-cards></app-game-cards>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="card bg-dark my-5">
        <div class="card-body">
          <h2 class="card-title text-center text-white py-3">{{ title }}</h2>
          <ul class="text-center list-inline py-3">
            <li class="list-inline-item">
              <a routerLink="users" class="btn btn-info">List Users</a>
                </li>
            <li class="list-inline-item">
              <a routerLink="/adduser" class="btn btn-info">Add User</a>
                </li>
          </ul>
        </div>
        
      </div>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

rawg angular service - I'm the most unsure about this portion of the code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RawgDataService {

  private ENDPOINTS = {
    GAME_LIST_URL: 'https://rawg.io/api/games?page=1&page_size=20&key=6d9368c98b03417d9a0cab226f150dc0'
  }

  constructor(private http: HttpClient) { }

  getGames(): Observable<any>{
    return this.http.get<any>(this.ENDPOINTS.GAME_LIST_URL);
  }
}