.HexGrid{position: relative;overflow: hidden;text-align: center;z-index:99;}.HexGrid .inner_span{display: block;}.HexGrid .HexGrid-inner-wrapper{display: inline-block;overflow: hidden;position: relative;}.HexGrid .hexagon{position: absolute;display: inline-block;}.HexGrid .hexagon_left, .HexGrid .hexagon_right{overflow: hidden;position: absolute;}.HexGrid .hexagon_left{visibility: hidden;-moz-transform: rotate(60deg);-ms-transform: rotate(60deg);-o-transform: rotate(60deg);-webkit-transform: rotate(60deg);transform: rotate(60deg);}.HexGrid .hexagon_right{visibility: hidden;-moz-transform: rotate(-120deg);-ms-transform: rotate(-120deg);-o-transform: rotate(-120deg);-webkit-transform: rotate(-120deg);transform: rotate(-120deg);}.HexGrid .hex_inner{display: block;visibility: visible;-moz-transform: rotate(60deg);-ms-transform: rotate(60deg);-o-transform: rotate(60deg);-webkit-transform: rotate(60deg);transform: rotate(60deg);background-position: center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;cursor: pointer;}.hex-card {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-perspective: 1000px;perspective: 1000px;clip-path: inset(16px 0px 16px 0px);}.hex-card-front {background-color: #94D1F5;}.hex-card-front, .hex-card-back {background-size: cover;background-position: center;-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);transition: -webkit-transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);-o-transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);width: 100%;aspect-ratio: 100/ 100;color: #acd0e9;font-size: 1.5rem;-webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);-webkit-backface-visibility: hidden;backface-visibility: hidden;}.hex-card-back {background-color: #75B8F5;}.hex-card:hover .hex-card-front, .hex-card:hover .hex-card-back {-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);transition: -webkit-transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);-o-transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);width: 100%;aspect-ratio: 1 / 1;-webkit-backface-visibility: hidden;backface-visibility: hidden;}.hex-card-front.no-after::after, .hex-card-back.no-after::after {content: none }.hex-card-front::after, .hex-card-back::after {position: absolute;top: 0;left: 0;z-index: 0;width: 100%;aspect-ratio: 1 / 1;content: "";display: block;opacity: 0.0;background-color: black;border-radius: 6px;}.hex-card-dark::after {opacity: 0.6;}.hex-card-back {position: absolute;top: 0;left: 0;width: 100%;}.hex-card-inner {-webkit-transform: translateY(-50%) translateZ(60px) scale(1);transform: translateY(-50%) translateZ(60px) scale(0.94);top: 50%;position: absolute;left: 0;width: 100%;padding: 2rem;-webkit-box-sizing: border-box;box-sizing: border-box;outline: 1px solid transparent;-webkit-perspective: inherit;perspective: inherit;z-index: 2;}.hex-card-back {-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.hex-card-front, .hex-card:hover .hex-card-back {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.hex-card:hover .hex-card-front {-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.top-to-bottom .hex-card-back {-webkit-transform: rotateX(180deg);transform: rotateX(180deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.top-to-bottom .hex-card-front, .top-to-bottom:hover .hex-card-back {-webkit-transform: rotateX(0deg);transform: rotateX(0deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.top-to-bottom:hover .hex-card-front {-webkit-transform: rotateX(-180deg);transform: rotateX(-180deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.hex-card-inner span {font-size: 18px;line-height: 20px;font-weight: 300;}.hex-card-inner p {position: relative;font-size: 1rem;margin-bottom: 0;color: rgba(255, 255, 255, 1);}