.mabul-bento{--mb-cols:3;--mb-gap:16px;--mb-h:220px;--mb-radius:14px;--mb-img:.45;--mb-accent:#8a5a2b;--mb-font:Georgia,serif;--mb-max:1100px;
  display:grid;grid-template-columns:repeat(var(--mb-cols),1fr);grid-auto-rows:minmax(var(--mb-h),auto);grid-auto-flow:dense;
  gap:var(--mb-gap);max-width:var(--mb-max);margin:30px auto;font-family:var(--mb-font);box-sizing:border-box}
.mabul-bento *{box-sizing:border-box}
.mabul-bento .mabul-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:#222;color:#fff;text-decoration:none;border-radius:var(--mb-radius);border-left:4px solid var(--mb-accent);
  box-shadow:0 4px 15px rgba(0,0,0,.08);transition:transform .3s ease,box-shadow .3s ease;isolation:isolate}
.mabul-bento a.mabul-card:hover,.mabul-bento a.mabul-card:focus-visible{transform:translateY(-4px);box-shadow:0 10px 25px rgba(0,0,0,.18);color:#fff}
.mabul-bento a.mabul-card:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.mabul-bento .mabul-card.large{grid-column:span 2;grid-row:span 2}
.mabul-bento .mabul-card.wide{grid-column:span 2}
.mabul-bento .mabul-card.tall{grid-row:span 2}
.mabul-bento .mabul-card-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--mb-img);
  transition:opacity .3s ease,transform .5s ease;z-index:1;margin:0;max-width:none}
.mabul-bento a.mabul-card:hover .mabul-card-bg-img{opacity:min(1,calc(var(--mb-img) + .15));transform:scale(1.03)}
.mabul-bento .mabul-card-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.3) 60%,transparent 100%)}
.mabul-bento .mabul-card-content{position:relative;z-index:3;display:block;padding:22px}
.mabul-bento .mabul-card-title{display:block;font-size:1.35rem;font-weight:700;line-height:1.2;margin:0 0 6px;color:#f7efe2}
.mabul-bento .mabul-card.large .mabul-card-title{font-size:1.8rem}
.mabul-bento .mabul-card-desc{display:block;font-size:.92rem;line-height:1.45;color:#ddd;margin:0}
.mabul-bento a.mabul-card::after{content:"↗";position:absolute;top:14px;right:16px;z-index:4;width:32px;height:32px;line-height:32px;text-align:center;
  border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);font-size:1rem;opacity:0;transform:translate(-4px,4px);transition:opacity .25s,transform .25s}
.mabul-bento a.mabul-card:hover::after,.mabul-bento a.mabul-card:focus-visible::after{opacity:1;transform:none}
@media(max-width:850px){
  .mabul-bento{grid-template-columns:repeat(2,1fr)}
  .mabul-bento .mabul-card.large,.mabul-bento .mabul-card.wide{grid-column:span 2}
  .mabul-bento .mabul-card.large,.mabul-bento .mabul-card.tall{grid-row:span 1}
  .mabul-bento .mabul-card.large,.mabul-bento .mabul-card.wide,.mabul-bento .mabul-card.tall{min-height:250px}
}
@media(max-width:550px){
  .mabul-bento{grid-template-columns:1fr}
  .mabul-bento .mabul-card.large,.mabul-bento .mabul-card.wide{grid-column:span 1}
  .mabul-bento a.mabul-card::after{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .mabul-bento .mabul-card,.mabul-bento .mabul-card-bg-img,.mabul-bento a.mabul-card::after{transition:none}
  .mabul-bento a.mabul-card:hover{transform:none}
}