.games {
    margin: 0.25rem;
    display: grid;
    row-gap: 10px;
    column-gap: 10px;
    font-weight: 500;
    font-size: 15px;
    font-family: sans-serif;
    line-height: 25.6px;
    vertical-align: baseline;
    letter-spacing: normal;
    word-spacing: 0px;
    grid-template-columns: repeat(2, minmax(200px, 1fr));

    .game-container {
        padding: 15px;
        border-radius: 10px;
        box-sizing: border-box;
        color: var(--body-fg);
        background-color: var(--body-bg);

        a {
            color: var(--body-fg);
        }
    }

    .game-container:hover {
        color: var(--body-bg-hover);
    }
    
    .game-container .game-header {
        color: var(--body-quiet-color);
    }
    
    .game-container .game-data-container {
        display: grid;
        row-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
    }
    
    .game-container .game-data-container .game-data-body,
    .game-container .game-data-container .game-data-header {
        display: grid;
        column-gap: 10px;
        grid-template-columns: 2fr 1fr;
    }
    
    .game-container .game-data-container .game-data-header .score-headers,
    .game-container .game-data-container .game-data-body .scores-container,
    .game-container .game-data-container .game-data-body .odds-container {
        display: grid;
        column-gap: 25px;
        row-gap: 10px;
    }
    
    .game-container .game-data-container .game-data-header .score-headers {
        font-weight: 600;
    }
    
    .game-container .game-data-container .game-data-body .odds-container {
        grid-template-columns: auto;
    }
    
    .game-container .game-data-container .game-data-body .teams-container,
    .game-container .game-data-container .game-data-body .scores-container .period-scores,
    .game-container .game-data-container .game-data-header .score-headers .period-header {
        display: grid;
        row-gap: 10px;
    }
    
    .game-container .game-data-container .game-data-body .odds-container,
    .game-container .game-data-container .game-data-header .score-headers .period-header,
    .game-container .game-data-container .game-data-body .scores-container .period-scores {
        place-content: end;
        text-align: end;
    }
    
    .game-container .game-header .live-header-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .game-container .game-header .live-header-container .live {
        text-align: end;
    }    
}

@media only screen and (max-width: 768px) {
    .games {
        grid-template-columns: repeat(1, 1fr);
    }
}