<h2 style="text-align: right">{$Grid.Row.game_date.DisplayValue}</h2>
<h1 style="text-align: center; font-size: 3em">
    {$Grid.Row.away_team_caption.DisplayValue} at {$Grid.Row.home_team_caption.DisplayValue}
</h1>
<table width="100%" border="1">
    <tr>
        <td><h2>{$Grid.Row.away_team_caption.DisplayValue}</h2></td>
        <td><h2>{$Grid.Row.home_team_caption.DisplayValue}</h2></td>
    </tr>
    <tr>
        <td style="width: 50%;font-size:12em;font-weight: bold;">{$Grid.Row.away_team_score.DisplayValue}</td>
        <td style="width: 50%;font-size:12em;font-weight: bold;">{$Grid.Row.home_team_score.DisplayValue}</td>
    </tr>
</table>

<h1 style="margin-top: 2em">Quarters</h1>
<table width="40%" style="font-size: 2em;">
    <tr style="background-color: #ccc;">
        <td width="20%"></td>
        <td width="40%" style="padding: 12px">{$Grid.Row.away_team_short_caption.DisplayValue}</td>
        <td width="40%" style="padding: 12px">{$Grid.Row.home_team_short_caption.DisplayValue}</td>
    </tr>
    {foreach from=$quarters item=quarter key=key}
        {if $quarter.quarter_caption == 'T'}
            <tr><td colspan="3"><hr></td></tr>
        {/if}
        <tr>
            <td><strong>{$quarter.quarter_caption}</strong></td>
            <td style="padding: 12px">{$quarter.away_team_score}</td>
            <td style="padding: 12px">{$quarter.home_team_score}</td>
        </tr>
    {/foreach}
</table>
