game-card | playing game card element based on ES6 and Polymer | Web Framework library

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

I want to rename some of my key's object but with a map it sounds quite difficult (I'm a newbie) here is my array :

I'm trying to put my json file list values underneath each other, now they show up in the html webpage next to each other

I put the json file in a js variable this is one of the json property lists

I have a series of game cards on a page that I want to be unlockable. I want a basic overlay to be over the cards while they are locked, however as of now the overlay either sits behind the card or takes up the whole window. I just want it to sit nicely over the card.

I have an unknown number of fixed-size cards displayed in a fluid container. I want the rows centered but the problem comes in when there's an uneven number of cards to fill a row. It'll center two cards underneath a row display 5 cards. I'd like for those 2 cards to justify to the left so everything remains vertically inline. If I align everything to the left, then I can end up with an uneven margin on the left and right side of the outer columns. For instance, the screen width might only have room to display 4 cards in a row, but the spacing to the right left to fill could be anywhere from 0 to 300px (the size of a card). Hopefully that makes sense. If not I'll draw pictures to illustrate what I mean.

https://www.codeply.com/p/pOnFgE1lTs