Template:Monthly Challenge year summary/styles.css

.ws-mc-year-summary-container { clear:both; }

.ws-mc-year-summary { border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; border-radius:3px; margin-bottom:3px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "1 2"	 "3 4"	  "5 6"	  "7 8"	  "9 10"	  "11 12";    align-items:stretch; box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px; font-size: 80%; }

.ws-mc-year-summary div ul { padding-left: 0; display: table; margin: auto; }

@media all and (max-width: 768px) { .ws-mc-year-summary ul ul { text-align:center; } }

@media all and (min-width: 768px) { .ws-mc-year-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "1 2 3 4"	 "5 6 7 8"	  "9 10 11 12";	} }

@media all and (min-width: 1200px) { .ws-mc-year-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "1 2 3 4 5 6"		"8 9 10 11 12";	} }

.ws-mc-year-summary-month { border-left:1px solid #aaa; border-top:1px solid #aaa; padding: 0.5em; }

.ws-mc-year-summary-monthname { font-weight: bold; text-align: center; }

.ws-mc-year-summary-success { font-weight: bold; color: seagreen; }

.ws-mc-year-summary-failure { color: tomato; }

.ws-mc-year-summary-current { font-style: italic; }

.ws-mc-year-summary-year-next { float:right; }