.recent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 200px));
    grid-auto-rows: 340px;/* max-width+offset so 215 + 20*/
    background-color: rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 8px;
    margin-right: 20px;
    color: white;


}



.recent-card
{
    display: flex;
    flex-direction: column;

    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);

    height: 320px;
    width: 185px;
    border-radius: 8px;

}


.recent-card-banner {
    width: 100%;
    height: 70%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    border-radius: 8px 8px 0px 0px;

}

.recent-card-details {


    width: 100%;
    height: 30%;
    position: relative;

}

.recent-card-item-name {
    width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    margin: 0;

}

.recent-card-last-played{
    width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    margin: 0;
}

