@media (max-width: 1450px) {

    /* Playoff card: a normal card again (spans all 3 columns only in the widest layout, standings.css) */
    .card_display.playoff-card {
        grid-column: auto;
        max-width: 515px;
    }
    .card_display.playoff-card .playoff-conferences {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        justify-content: normal;
        column-gap: 8px;
    }

    .title_card {
        grid-column: span 2;
    }
    .container {
        grid-template-columns: 1fr 1fr;
    }
    .previous_game_card {
        grid-column: 1 / span 2;
        justify-items: center;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    upcoming_games_button{
        margin-left: 48px;
        justify-self: baseline;
    }
    .headshot-img > img, .headshot-img-opponent > img {    
        max-width: 130px;
    }
    .previous-matchup{
        grid-row: 2;
        grid-column: 2;
    }

}


@media (max-width: 1054px) {
    
    .container {
        grid-template-columns: 1fr;
    }

    .upcoming_game{
        grid-row: 1;
    }   
    .upcoming_games_button{
        grid-column: 3;        
        align-self: center;
        margin-top: 16px;
        margin-left: 82px;
        justify-self: center;
    }

    .previous_game_card {
        grid-column: 1;
        grid-template-columns: 1fr;
    }
    .previous_game {
        grid-column: 1 / span 3;
    }

    .title_card {
        grid-template-columns: 150px 1fr;                                      
        }

    .title_actions {
        grid-column: span 2;
    }
    
    .tab:hover {       
        margin-bottom: -1px;
    }

    .headshot-img > img, .headshot-img-opponent > img {    
    max-width: 110px;
    }


        .previous-matchup{
        grid-row: 3;
        grid-column: 1;
    }
    .previous-matchup-date{
        align-content: baseline;
        grid-row: 2;
        grid-column: 1;
    }
}

@media screen and (max-width: 539px) {
    html {
        font-size: 85%; 
    }

    .container {
        grid-template-columns: 90vw;
    }
    .content {
        overflow: auto;
    }
    .title_card { 
        grid-template-columns: 1fr;
        justify-content: center;
        text-align: center;
    }
    .title_actions {
        grid-column: span 1;
    }
    .card_display{
        min-width: 50vw;

    }

    .top_row_element {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;    
        gap: 2px;
    }


    .upcoming_game{
        grid-row: 1;
        grid-column: 2 / span 2;
    }   
    .upcoming_games_button{
        grid-column: 3;
        justify-self: center;
        margin-left: 0px;
        margin-bottom: 8px;
        margin-top: 80px;
        align-self: end;
    }
    .team-summary{
        grid-row: 4;
        grid-column: 1 / span 2;
        width: 100%;       
    }

    table{
        place-self: unset;
        white-space: nowrap;
    }

    .table_card{
        justify-items: unset;
        text-align: center;
    }

    .content_modal{
        justify-items: unset;
    }
    .leaders-table{
        width: 100vw;
    }
    .tabs-container{
        justify-content: left;
    }

    .tab:hover {
        margin-bottom: -1px;
    }
    .headshot-img > img, .headshot-img-opponent > img {    
    width: clamp(70px, 20vw, 110px);
    margin: 0 auto;
    }
    .previous-matchup{
        grid-row: 3;
        grid-column: 1;
    }
    .previous-matchup-date{
        align-content: baseline;
        grid-row: 2;
        grid-column: 1;
    }

    .player-compare > th, tr, .goalie-compare > th, tr, {
        font-size: 85%;
    }

}