演出・リッチ
ホバー拡張ベント
ベントグリッドのタイルにカーソルを乗せると、その列がぐっと広がって隠れた説明が現れる。CSSの :has() だけで作るモダンなベント。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
実装メモ
拡張は親に :has(.tile:hover) を効かせて grid-template-columns を変える実装(モダンブラウザ対応)。タッチ端末では :has() のホバーが効かないので、JSで .is-open を付け替えています。
コード（コピーして使えます）
<div class="bento">
<button class="bento-tile" style="--c1:#2b50c7;--c2:#6a8cff">
<span class="bento-emoji">🚀</span>
<span class="bento-label">Launch</span>
<span class="bento-more">素早く立ち上げ</span>
</button>
<button class="bento-tile" style="--c1:#c779d0;--c2:#ff9a8b">
<span class="bento-emoji">🎨</span>
<span class="bento-label">Design</span>
<span class="bento-more">美しい見た目</span>
</button>
<button class="bento-tile" style="--c1:#1f9d76;--c2:#5ad1a5">
<span class="bento-emoji">⚡</span>
<span class="bento-label">Fast</span>
<span class="bento-more">軽快な動作</span>
</button>
</div>