.pageintro, .medium{ -webkit-box-sizing: border-box; -mox-box-sizing: border-box; box-sizing: border-box; } .pageintro, .mediumsWrap { width: auto; max-width: 750px; margin: 0 auto 1.5em auto; line-height: 1.5em; } .pageintro { padding: 1em; color: #AAA; } .mediumsWrap { display: grid; grid-template-columns: repeat(3, 33.3% [col-start]); } .medium { background-color: #222; color: #AAA; margin: 0 5px 5px 0; padding: 1em; } .medium:target { color: #DDD; border: 1px solid pink; } .medium h2 { font-size: 1.6em; font-size: 1.6rem; color: #fd3; } .medium .eventcount{ font-size: .9em; color: #888; justify-self: end; } @media all and (min-width: 501px) and (max-width: 800px){ .mediumsWrap { grid-template-columns: repeat(2, 50% [col-start]); } } @media all and (max-width: 500px){ .mediumsWrap { grid-template-columns: repeat(1, 100% [col-start]); } }