h1{text-align:center}main{display:grid;grid-template-areas:"scy" "lcm" "controls" "top-events";justify-items:center;column-gap:8px;row-gap:8px; #top-events { grid-area: top-events; } #controls { grid-area: controls; } #scy, #lcm { border: 1px solid rgba(34,36,38,.15); .section-label { display: block; text-align: center; font-weight: bold; padding: 4px; background-color: rgba(0,0,50,.05); } div { display: grid; grid-template-columns: 112px auto 80px; gap: 8px; padding: 4px; border-top: 1px solid rgba(34,36,38,.15); input { width: 125px; } label, span { justify-self: right; } } div:nth-child(odd) { background-color: rgba(0,0,50,.05); } } #scy { grid-area: scy; justify-self: center; } #lcm { grid-area: lcm; justify-self: center; } #top-events { #overall-powerindex { font-weight: bold; font-size: 2rem; } #first, #second, #third, #fourth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } } .popup { display: none; height: 146px; width: 416px; position: fixed; left: calc(50% - 208px); top: calc(50% - 73px); padding: 24px; background-color: #fff; border: 2px solid rgba(34,36,38,.15); box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.5); &.active { display: grid; grid-template-rows: 32px 64px 24px; row-gap: 8px; align-items: end; } }}@media(min-width:769px){main{grid-template-areas:"scy lcm" "controls controls" "top-events top-events"; #scy { grid-area: scy; justify-self: right; } #lcm { grid-area: lcm; justify-self: left; }}}