main{background-color:#f7f9fa}.hex-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:20px 0}.hex-item{height:280px;margin:0 auto}.hex-content,.hex-item{position:relative;width:100%}.hex-content{align-items:center;background:#fff;display:flex;height:100%;justify-content:center;transition:all .3s ease}.hex-content,.hex-content:before{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.hex-content:before{background:linear-gradient(45deg,#e5e7eb,#f9fafb,#e5e7eb);content:"";inset:-2px;opacity:0;position:absolute;transition:opacity .3s ease;z-index:-1}.hex-item:hover .hex-content:before{opacity:1}