#wrapper_games {padding:1rem 1rem}

h2 {font-family:Verdana,sans-serif; font-size:1.35rem; font-weight:bold; margin:0}
h3 {font-family:Verdana,sans-serif; font-size:1rem; font-weight:bold; margin:0 0 0.1rem 0; padding:0.2rem 0; background-color:#f1f1f1}

table.games_header_s {border-spacing:0; border-collapse:collapse}
table.games_header_s > tbody > tr > td:first-child {padding:0 1.8rem}

table.games {width:100%; border-spacing:0; border-collapse:collapse}
table.games > tbody > tr > td {display:block; padding:1.2rem 0 0.3rem 0}
table.games > tbody > tr > td:first-child {display:none}

.knight_king_icon {width:3.2rem}
.space1 {height:1.5rem}
.space2 {height:0.45rem}

@media only screen and (min-width:600px)
{
   #wrapper_games {padding:1rem 0}

   h3 {font-size:1.15rem; font-weight:bold; background-color:transparent}

   table.games_header_s {margin-left:auto; margin-right:auto}

   table.games {width:auto; margin-left:auto; margin-right:auto}
   table.games > tbody > tr > td {display:table-cell; padding:1rem calc(1rem + (100vw - 600px) * 0.12); white-space:nowrap}

   .knight_king_icon {width:4rem}
   .space1 {height:1.1rem}
}

@media only screen and (min-width:860px)
{
   #wrapper_games {padding:2rem 0}

   table.games_header_s {display:none}
   .knight_king_icon {width:11rem}
   table.games > tbody > tr > td:first-child {display:table-cell; text-align:center}
   table.games > tbody > tr > td {padding:1rem calc(1rem + (100vw - 860px) * 0.146)}
}

@media only screen and (min-width:1024px)
{
   table.games > tbody > tr > td {padding:1rem calc(1rem + (100vw - 1024px) * 0.125)}
}

@media only screen and (min-width:1220px)
{
   table.games > tbody > tr > td {padding:1rem 2.5rem}
}