Editorial bento

<main><header><span>THE CREATIVE INDEX</span><h1>Less, but considered.</h1></header><div class="grid"><article class="wide"><small>01 / THE APPROACH</small><h2>Make space<br>for the good stuff.</h2><p>Thoughtful interfaces. Lasting impressions.</p><b>↗</b></article><article class="art" aria-label="Abstract geometric circles"><i></i><i></i><i></i></article><article class="stat"><small>WORK IN PROGRESS</small><strong>024</strong><span>Ideas worth exploring</span></article><article class="note"><small>A NOTE TO SELF</small><h3>Stay curious.<br>Keep making.</h3><span>THE REST WILL FOLLOW.</span></article></div></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:#ebe9e4;color:#343a34}main{width:590px;max-width:100%}header>span{font-size:7px;letter-spacing:2px;color:#8a8c80}h1{font-family:Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.8px;margin:12px 0 22px}.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}article{border-radius:9px;position:relative;overflow:hidden;padding:25px;border:1px solid #d4d6ca;background:#f7f6f0}small{font-size:6px;letter-spacing:1.6px;color:#8e9484}.wide{height:180px;background:#e3e6d8}h2{font:27px/1.15 Georgia,serif;letter-spacing:-.7px;margin:15px 0}p{font-size:8px;color:#8a947f}.wide>b{position:absolute;right:20px;bottom:20px;font-size:21px;font-weight:400;color:#879678}.art{background:#768d78;display:grid;place-items:center}.art i{position:absolute;width:135px;height:135px;border:1px solid #dce3ba88;border-radius:50%;transform:translateX(-35px)}.art i:nth-child(2){transform:translateX(0)}.art i:nth-child(3){transform:translateX(35px)}.stat{display:flex;flex-direction:column}.stat strong{font-size:47px;letter-spacing:-3px;font-weight:400;margin:14px 0;color:#74856d}.stat>span{font-size:8px;color:#8e9887}.note{background:#ded8c9}.note h3{font:24px/1.2 Georgia,serif;margin:13px 0;color:#72735f}.note>span{font-size:6px;letter-spacing:1.8px;color:#92947f}@media(max-width:450px){.grid{grid-template-columns:1fr}.art{height:170px}}