:root{--cell-size:20vw;--grid-width:4;--max-cell-size:250px;--min-cell-size:80px}.bento{grid-template-columns:repeat(var(--grid-width),clamp(var(--min-cell-size),var(--cell-size),var(--max-cell-size)));grid-auto-rows:clamp(var(--min-cell-size),var(--cell-size),var(--max-cell-size));width:calc(clamp(var(--min-cell-size),var(--cell-size),var(--max-cell-size))*var(--grid-width));background-color:#fff;border:2px solid #000;margin:2rem auto;font-weight:400;display:grid;overflow:hidden}.tile-content{height:100^;margin:0 .5rem .5rem}.tile{place-items:top;color:#000;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;border:2px solid #000;font:clamp(10px,2vw,16px)/1.2 system-ui,sans-serif;transition:transform .2s;display:grid;position:relative;overflow:hidden}.tile h2{text-transform:uppercase;border-bottom:2px solid #000;border-right:2px solid #000;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;margin-top:0;margin-bottom:0;padding:.5rem;font-size:clamp(12px,2.25vw,18px);line-height:1.1}.b-1x1{grid-area:span 1/span 1}.b-2x1{grid-area:span 1/span 2}.b-3x1{grid-area:span 1/span 3}.b-4x1{grid-area:span 1/span 4}.b-1x2{grid-area:span 2/span 1}.b-2x2{grid-area:span 2/span 2}.b-3x2{grid-area:span 2/span 3}.b-1x3{grid-area:span 3/span 1}.b-2x3{grid-area:span 3/span 2}.b-1x4{grid-area:span 4/span 1}.theme-yellow{color:#000;background-color:#f5cd00}.theme-red h2{color:#fff;background-color:#f9070a}.theme-yellow h2{color:#000;background-color:#fff}.theme-purple h2{color:#fff;background-color:#63135e}.theme-green h2{background-color:#fff}.theme-blue h2{color:#fff;background-color:#3a90cc}.theme-darkpurple h2{color:#fff;background-color:#362558}.theme-green{background-color:#2df185}@media (max-width:768px){:root{--cell-size:22vw}.bento{box-sizing:border-box;box-shadow:none;background:0 0;border:none;border-radius:0;flex-direction:column;gap:12px;width:100%;max-width:90vw;padding:12px;display:flex;overflow:visible}.tile h2{text-transform:uppercase;font-size:14px}.tile{color:#000;background-color:#fff;width:100%;height:auto;min-height:80px;font-size:14px}.tile[class*=b-]{grid-column:unset;grid-row:unset}}