.hexagon-container{width:250px;height:250px;margin:34.64px 10px;position:relative;display:inline-block}.hexagon{position:absolute;width:100%;height:100%;background-color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center;transform:rotate(0deg);transition:background-color .3s ease}.hexagon:hover{background:linear-gradient(to bottom right,#17877a,#7ff6e7)}.hexagon-content{transform:rotate(0deg);text-align:center}.hexagon-content h3{font-size:1rem;margin-bottom:.5rem}.hexagon-content p{font-size:.8rem;margin-top:.2rem}.clip-hexagon{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}