.framework{--color-purple:#7b0169;--color-red:#ce0b00;--color-pink:#f8267f;--color-green:#9eb700;--color-blue:#05b7c9;--color-orange:#fc8b1f;--color-yellow:#f2cd45;--color-white:#fff;position:relative}.framework-container{border-radius:32px;box-shadow:5px 5px 20px #0000001a;display:flex;flex-direction:row-reverse;gap:10rem;justify-content:space-between;padding:6rem}.framework__intro,.framework__side{display:flex;flex-direction:column;justify-content:center}.framework__side{width:50%}.framework__intro__header{font-size:5.5rem;line-height:.88;margin:0}.framework__intro__header span{color:var(--color-secondary2);margin:0}.framework__intro__text{font-size:1.6rem;font-weight:300;margin-bottom:5.3rem;margin-top:3rem}.framework__intro__prompt{color:#05b7c9}.framework__intro--default,.framework__intro--hex{display:none;opacity:0;transition:all .25s ease-in-out .25s;visibility:hidden}.framework__intro--default.active,.framework__intro--hex.active{display:block;opacity:1;visibility:visible}.framework__tiles{--tilesMaxSize:170;--hexLongSide:1em;--spacing:calc(7em/var(--tilesMaxSize));--border-width:calc(7em/var(--tilesMaxSize));--sqRt3:1.73205080757;--tan60:var(--sqRt3);--sin30:0.5;--sin60:(var(--sqRt3)/2);--hexShortSide:calc(var(--hexLongSide)/2*var(--sqRt3));--interlock:var(--hexShortSide)/2 * -1;--gap:calc(var(--hexLongSide)/2 + var(--spacing)/var(--sin30));--vmargin:calc(var(--interlock) + var(--spacing)/2);font-size:min(14vw,var(--tilesMaxSize) * 1px);font-weight:600;letter-spacing:calc(1.44em/var(--tilesMaxSize));margin:20px auto;max-width:1200px;text-transform:uppercase;width:50%}.honeycomb{margin:calc(var(--vmargin)*-1) 0}.hex-layer-2{grid-template-columns:repeat(2,0fr)}.hex-layer-1,.hex-layer-2{align-content:center;display:grid;gap:var(--gap);justify-content:center;margin:var(--vmargin) 0;transition:all .3s ease}.hex-layer-1{grid-template-columns:repeat(1,0fr)}.hex{background:#ffd100;height:var(--hexShortSide);width:var(--hexLongSide)}.hex,.hex-inner{align-self:center;-webkit-clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transition:background .4s}.hex-inner{align-items:center;background:#fff;display:flex;flex-direction:column;height:calc(var(--hexShortSide) - var(--border-width)*2);justify-content:center;margin:var(--border-width);width:calc(var(--hexLongSide) - var(--border-width)*2/var(--sin60))}.hex-inner span{font-size:calc(18em/var(--tilesMaxSize))}.hex{display:flex;justify-content:center}.hex:hover{cursor:pointer}.hex--purple{background:var(--color-purple);color:var(--color-purple)}.hex--red{background:var(--color-red);color:var(--color-red)}.hex--pink{background:var(--color-pink);color:var(--color-pink)}.hex--green{background:var(--color-green);color:var(--color-green)}.hex--blue{background:var(--color-blue);color:var(--color-blue)}.hex--orange{background:var(--color-orange);color:var(--color-orange)}.hex--yellow{background:var(--color-yellow);color:var(--color-yellow)}.hex--purple svg path{fill:var(--color-purple)}.hex--red svg path{fill:var(--color-red)}.hex--pink svg path{fill:var(--color-pink)}.hex--green svg path{fill:var(--color-green)}.hex--blue svg path{fill:var(--color-blue)}.hex--orange svg path{fill:var(--color-orange)}.hex--yellow svg path{fill:var(--color-yellow)}.color--purple{color:var(--color-purple)}.color--red{color:var(--color-red)}.color--pink{color:var(--color-pink)}.color--green{color:var(--color-green)}.color--blue{color:var(--color-blue)}.color--orange{color:var(--color-orange)}.color--yellow{color:var(--color-yellow)}.hex--purple.active,.hex--purple.active .hex-inner,.hex--purple:hover,.hex--purple:hover .hex-inner{background:var(--color-purple)}.hex--red.active,.hex--red.active .hex-inner,.hex--red:hover,.hex--red:hover .hex-inner{background:var(--color-red)}.hex--pink.active,.hex--pink.active .hex-inner,.hex--pink:hover,.hex--pink:hover .hex-inner{background:var(--color-pink)}.hex--green.active,.hex--green.active .hex-inner,.hex--green:hover,.hex--green:hover .hex-inner{background:var(--color-green)}.hex--blue.active,.hex--blue.active .hex-inner,.hex--blue:hover,.hex--blue:hover .hex-inner{background:var(--color-blue)}.hex--orange.active,.hex--orange.active .hex-inner,.hex--orange:hover,.hex--orange:hover .hex-inner{background:var(--color-orange)}.hex--yellow.active,.hex--yellow.active .hex-inner,.hex--yellow:hover,.hex--yellow:hover .hex-inner{background:var(--color-yellow)}.hex.active .hex-inner,.hex:hover,.hex:hover .hex-inner{color:var(--color-white)}.hex .hex-inner__chevon,.hex:hover .hex-inner__chevon{transition:all .2s ease-in-out}.hex:hover .hex-inner__chevon{transform:translateY(1rem)}.hex .hex-inner svg path{transition:all .3s ease}.hex.active .hex-inner svg path,.hex:hover .hex-inner svg path{fill:var(--color-white)}.hex-inner__icon{align-items:center;display:flex;height:3rem;justify-content:center;margin-bottom:1rem;width:3rem}.framework__intro--hex__header,.framework__mobile--hex__header{color:#333;font-weight:600;letter-spacing:1.92px;margin-bottom:2rem;margin-top:0}.framework__intro--hex__subtitle,.framework__mobile--hex__subtitle{margin-bottom:2rem;text-transform:uppercase}.framework__intro--hex__subtitle span,.framework__mobile--hex__subtitle span{letter-spacing:1.44px}.framework__intro--hex__text,.framework__mobile--hex__text{font-size:1.6rem;font-weight:300;margin-bottom:5rem}.framework__intro--hex__cta,.framework__mobile--hex__cta{letter-spacing:1.28px;text-decoration:none;text-transform:uppercase}@media only screen and (max-width:900px){.framework-container{gap:5rem;padding:4rem}.framework__tiles{font-size:min(33vw,var(--tilesMaxSize) * 1px);font-weight:600;letter-spacing:calc(1.44em/var(--tilesMaxSize));margin:20px auto;max-width:1200px;text-transform:uppercase}}@media only screen and (min-width:801px){.framework__mobile{display:none}}@media only screen and (max-width:800px){.framework__mobile{display:block}.framework__mobile--hex{display:none;opacity:0;transition:all .25s ease-in-out .25s;visibility:hidden}.framework__mobile--hex.active{display:block;opacity:1;visibility:visible}.framework-container{flex-direction:column;gap:2rem}.framework__side{width:100%}.hex-inner__icon{margin-bottom:.05rem}.framework__intro--default{display:block!important;opacity:1!important;visibility:visible!important}.framework__intro__text{margin-bottom:2rem;margin-top:2rem}.framework__intro__header{font-size:4rem}}@media only screen and (max-width:640px){.hex-inner__icon svg{height:1.5rem;width:1.5rem}.framework-container{border-radius:16px}}@media only screen and (max-width:420px){.framework__intro__header{font-size:3.5rem}.framework__intro__header span{color:var(--color-secondary2);font-size:2.5rem;margin:0}}