.hex-grid-wrapper{display:flex;align-items:center;gap:3.5rem;flex-wrap:wrap;justify-content:space-between;flex-direction:row-reverse}.hex-grid{display:grid;grid-template-columns:repeat(3,160px);grid-gap:24px}.hex-item{text-decoration:none;display:block;outline:none}.hex-shape{width:160px;height:160px;border-radius:50%;position:relative;display:grid;place-items:center;transition:transform .22s ease;cursor:pointer;overflow:hidden}.hex-bg{background-size:cover;background-position:50%;transition:transform .3s ease}.hex-bg,.hex-overlay{position:absolute;inset:0}.hex-overlay{background:rgba(15,23,42,.15);transition:background .22s ease}.hex-label{position:relative;z-index:1;font-size:.88rem;font-weight:700;color:white;text-align:center;line-height:1.25;max-width:100px;text-shadow:0 2px 8px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}.hex-active .hex-shape,.hex-item:hover .hex-shape{transform:scale(1.1)}.hex-active .hex-bg,.hex-item:hover .hex-bg{transform:scale(1.15)}.hex-active .hex-overlay,.hex-item:hover .hex-overlay{background:rgba(15,23,42,.6)}.hex-active .hex-label,.hex-item:hover .hex-label{opacity:1;transform:translateY(0)}.hex-detail{flex:1;min-width:240px;max-width:380px;min-height:100px;display:flex;align-items:center}@media (max-width:48em){.hex-grid-wrapper{flex-direction:column-reverse;gap:2rem}.hex-grid{grid-template-columns:repeat(3,100px);grid-gap:14px}.hex-shape{width:100px;height:100px}.hex-label{font-size:.68rem}.hex-detail{text-align:center}}