html,body{margin:0;background:#fff}

.glB{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#f7f5f1;padding:clamp(52px,6.5vw,96px) 24px;
}
.glB__in{max-width:1080px;margin:0 auto}
.glB__title{margin:0 0 clamp(24px,3.5vw,38px);font-size:13px;font-weight:800;letter-spacing:.3em;color:#8a7a67;text-transform:uppercase}
.glB__mason{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(150px,auto);gap:clamp(12px,2vw,20px)}
.glB__cell{
  border-radius:8px;display:flex;align-items:flex-end;padding:18px;position:relative;overflow:hidden;
}
.glB__cell span{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#fff;position:relative;z-index:1;
  opacity:0;transform:translateY(6px);transition:.24s;
}
.glB__cell::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(30,24,18,.6));
  opacity:0;transition:opacity .24s;
}
.glB__cell:hover span{opacity:1;transform:none}
.glB__cell:hover::after{opacity:1}
.glB__cell--tall{grid-row:span 2}
.glB__cell--wide{grid-column:span 2}
.glB__c1{background:linear-gradient(160deg,#c2ab8f,#7d6449)}
.glB__c2{background:linear-gradient(160deg,#b7c4bd,#6a7d76)}
.glB__c3{background:linear-gradient(160deg,#d7c9b8,#a08e78)}
.glB__c4{background:linear-gradient(120deg,#a9bfa0,#5f7a56)}
.glB__c5{background:linear-gradient(160deg,#cbb8b0,#8a6d63)}
@media (max-width:760px){
  .glB__mason{grid-template-columns:1fr 1fr}
  .glB__cell--wide{grid-column:span 2}
  .glB__cell--tall{grid-row:span 1}
  .glB__cell span{opacity:1;transform:none}
  .glB__cell::after{opacity:1}
}