.hexagon-section{display:flex;justify-content:center;text-align:center;padding:0 0 1rem}.hex-block{filter:drop-shadow(0 10px 5px hsla(0,0%,0%,.5))}.hex-block-inner{display:flex;align-items:center;justify-content:center;background-color:var(--color-accent);aspect-ratio:1;-webkit-clip-path:polygon(50% 100%,0 75%,0 25%,50% 0,100% 25%,100% 75%);clip-path:polygon(50% 100%,0 75%,0 25%,50% 0,100% 25%,100% 75%);text-align:center;padding:5px;overflow:hidden;overflow-wrap:anywhere}.hex-title{font-size:clamp(12px,2vw,20%)}.hexagon-layout{--size:40vw;position:relative;display:flex;flex-direction:column;justify-content:center;margin:0 auto}.hex-pair{display:flex;align-items:center;gap:16px}.hex-pair:nth-child(2n){justify-content:end}.hex-pair:nth-child(2n) .hex-block{order:2}.hex-pair:nth-child(2n) .hex-block .hex-block-inner{background-color:var(--color-secondary);color:var(--color-primary-dark)}.hex-pair:nth-child(2n) .hex-block-text{text-align:right}.hex-pair .hex-block{width:var(--size)}.hex-pair .hex-block-text{display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;height:calc(.5*var(--size));font-size:clamp(12px,2vw,20px);text-align:left}@media(min-width:577px){.hexagon-layout{--size:50vw;position:relative;width:calc(var(--size));min-height:var(--size);display:flex;align-items:center;justify-content:center}.pos-1{left:50%;top:100%;transform:translate(-50%,-100%)}.pos-2{left:0;top:75%;transform:translateY(-75%)}.pos-3{left:0;top:25%;transform:translateY(-25%)}.pos-4{left:50%;top:0;transform:translate(-50%)}.pos-5{left:100%;top:25%;transform:translate(-100%,-25%)}.pos-6{left:100%;top:75%;transform:translate(-100%,-75%)}.hex-pair.active .hex-block-inner{background-color:var(--color-secondary);color:var(--color-primary-dark)}.hex-pair .hex-block{position:absolute;padding:5px;width:calc(var(--size)*.25);height:calc(var(--size)*.25)}.hex-pair .hex-block .hex-block-inner:hover{background-color:var(--color-secondary);color:var(--color-primary-dark);scale:1.2}.hex-pair .hex-block-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;display:flex;align-items:center;justify-content:center;text-align:center!important}}