벤토 피처 섹션

<div class="bento" id="bento">
  <div class="tile hero"><span class="dot"></span><b class="bar b1"></b><b class="bar b2"></b><div class="chat"><span></span><span class="me"></span></div></div>
  <div class="tile a"><i class="icon"></i><b class="ln"></b></div>
  <div class="tile b"><i class="icon"></i><b class="ln"></b></div>
  <div class="tile wide"><i class="icon"></i><b class="ln"></b><b class="ln s"></b></div>
</div>

.bento{width:min(92%,760px);height:min(90%,300px);display:grid;gap:clamp(6px,1.5vmin,10px);
  grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;
  grid-template-areas:"hero a b" "hero wide wide"}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:clamp(8px,1.6vmin,14px);
  box-shadow:0 2px 8px rgba(0,0,0,.06);padding:8%;display:flex;flex-direction:column;gap:8%;overflow:hidden}
.hero{grid-area:hero;background:color-mix(in oklab,var(--accent) 10%,var(--surface))}
.hero .dot{width:14%;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.bar{display:block;height:10%;border-radius:3px;background:var(--line)}
.bar.b1{width:65%}.bar.b2{width:45%}
.chat{margin-top:auto;display:flex;flex-direction:column;gap:8%;align-items:flex-start}
.chat span{display:block;height:clamp(6px,1.8vmin,11px);width:55%;border-radius:8px 8px 8px 2px;background:var(--line)}
.chat span.me{align-self:flex-end;width:40%;border-radius:8px 8px 2px 8px;background:var(--accent);
  animation:pop 3s ease-in-out infinite}
.a{grid-area:a}.b{grid-area:b}.wide{grid-area:wide;flex-direction:row;align-items:center}
.icon{width:22%;aspect-ratio:1;border-radius:6px;background:var(--accent-2);flex:none}
.a .icon{background:var(--accent-3)}
.ln{display:block;height:9%;border-radius:3px;background:var(--line);flex:1}
.ln.s{flex:none;width:20%}
@keyframes pop{0%,100%{opacity:.6}50%{opacity:1}}