*{box-sizing:border-box;margin:0;padding:0}body{width:100dvw;height:100dvh}main{--row:2;--col:calc(var(--n-bottles) / 2);grid-template-columns:repeat(var(--col), 1fr);grid-template-rows:repeat(var(--row), 1fr);place-items:center;width:100%;height:100%;padding:64px;display:grid}@media (width<1000px){main{--row:3;--col:calc(var(--n-bottles) / 3);padding:48px}}@media (width<700px){main{--row:4;--col:calc(var(--n-bottles) / 4);padding:32px}}.bottle{grid-template-rows:repeat(var(--max-per-bottle), 1fr);background-color:#0002;border:2px solid #0003;border-radius:8px;width:48px;height:128px;transition:box-shadow .12s ease-out,border-color .12s ease-out;display:grid;overflow:hidden}.bottle>*{-webkit-user-select:none;user-select:none;background-color:var(--c);width:100%;height:100%}.bottle>:first-child{border-radius:6px 6px 0 0}.bottle>:last-child{border-radius:0 0 6px 6px}.bottle>[data-row="2"]{grid-row:span 2}.bottle>[data-row="3"]{grid-row:span 3}.bottle>[data-row="4"]{grid-row:span 4}.bottle>[data-row="5"]{grid-row:span 5}.bottle>[data-row="6"]{grid-row:span 6}.bottle>[data-row="7"]{grid-row:span 7}.bottle>[data-row="8"]{grid-row:span 8}.bottle.bottle-target{border-color:#0004;box-shadow:0 0 0 3px #fff3,0 0 18px #0008}