html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;margin:0;line-height:1.5}div:focus-visible{outline:none}.grid-container{display:grid;grid-template-columns:repeat(auto-fit,100px);grid-template-rows:repeat(auto-fit,auto [section] 100px [bar] auto [state]);grid-auto-flow:row;justify-content:center;align-items:center}.bar{width:100px;height:100px;margin:2px;align-items:end;justify-content:start;display:grid;grid-template-rows:subgrid;grid-row:span 3}.bar p{margin:0}.before,.after{background-color:#f7f7f7;grid-row:2;width:100px;height:100px;display:block;margin:0;text-align:center;align-content:center}