.boxes-wrapper{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);text-align:center;width:100%}.box{background-color:var(--box-color);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);color:#fff;cursor:pointer;display:block;font-family:Bogart,sans-serif;font-size:18px;overflow:hidden;padding:30px 20px;position:relative;text-decoration:none;transition:background-color .3s ease,color .3s ease;-webkit-tap-highlight-color:transparent}.box:hover{background-color:var(--box-hover-color);color:#fff}.box-hover-text,.box-text{left:50%;line-height:1.3;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .4s ease;width:90%;z-index:2}.box-text{z-index:2}.box-hover-text{color:#000;font-family:Inter,sans-serif;font-size:16px;font-weight:600;opacity:0;z-index:2}.box:hover .box-text{opacity:0}.box:hover .box-hover-text{opacity:1}.box:before{content:"";inset:0;pointer-events:none;position:absolute;z-index:1}@media (max-width:768px){.boxes-wrapper{grid-template-columns:1fr}.box{padding:30px 15px}.box,.box-text{font-size:20px}.box-hover-text{font-size:16px}}