.ColorGrid_container__ZYG_u{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5%,1fr));width:100%;padding:8px;border-radius:8px;grid-gap:8px;gap:8px}@media (max-width:768px){.ColorGrid_container__ZYG_u{grid-template-columns:repeat(auto-fit,minmax(6.8%,1fr))}}@media (max-width:480px){.ColorGrid_container__ZYG_u{grid-template-columns:repeat(auto-fit,minmax(6.5%,1fr))}}.ColorGrid_colorBox__Q2QwW{aspect-ratio:1/1;overflow:hidden;cursor:pointer;background-color:var(--color-hex);border-radius:4px;position:relative}.ColorGrid_colorBox__Q2QwW:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.73);opacity:0;transition:opacity .3s ease}.ColorGrid_colorBox__Q2QwW:hover:before{opacity:1}.ColorGrid_colorBoxLink__qhFJJ{text-decoration:none}.ColorGrid_overlay__c3djJ{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:8px;color:#fff;opacity:0;line-height:1.2;font-size:12px;position:relative;z-index:1;transition:opacity .3s ease}.ColorGrid_colorBox__Q2QwW:hover .ColorGrid_overlay__c3djJ{opacity:1}.ColorGrid_learnMore__lwr_X{font-size:.8em}@media (min-width:480px){.ColorGrid_container__ZYG_u{gap:8px}.ColorGrid_colorBox__Q2QwW{border-radius:6px}.ColorGrid_overlay__c3djJ{font-size:14px}}@media (min-width:768px){.ColorGrid_container__ZYG_u{gap:8px}.ColorGrid_colorBox__Q2QwW{border-radius:8px}.ColorGrid_overlay__c3djJ{font-size:16px}}@media (min-width:1024px){.ColorGrid_overlay__c3djJ{font-size:18px}}.ColorOptions_optionsContainer__a7Qp5{max-width:328px;margin-left:64px;border-radius:16px;max-height:50vh;overflow-y:auto;box-shadow:0 0 40px 5px rgba(0,0,0,.125);border:1px solid hsla(0,0%,100%,.05);background:hsla(0,0%,100%,.02)}@media (max-width:768px){.ColorOptions_optionsContainer__a7Qp5{margin-left:0;max-width:100%}}.ColorOptions_iconButton__jpSkg{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;margin-left:8px}.ColorOptions_iconButton__jpSkg:hover{background:#222}.ColorOptions_heroColor__y4lGQ{display:flex;align-items:center;justify-content:center;width:100%;height:200px;font-size:14px;cursor:pointer}.ColorOptions_heroColor__y4lGQ:hover{opacity:.8}.ColorOptions_switchingColorContainer__ytbMf{padding-top:8px;height:100%}