.ColorGrid_container__J_dmR{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__J_dmR{grid-template-columns:repeat(auto-fit,minmax(6.8%,1fr))}}@media (max-width:480px){.ColorGrid_container__J_dmR{grid-template-columns:repeat(auto-fit,minmax(6.5%,1fr))}}.ColorGrid_colorBox__cTSOA{aspect-ratio:1/1;overflow:hidden;cursor:pointer;background-color:var(--color-hex);border-radius:4px;position:relative}.ColorGrid_colorBox__cTSOA: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__cTSOA:hover:before{opacity:1}.ColorGrid_colorBoxLink__FLvD9{text-decoration:none}.ColorGrid_overlay__G4Zzm{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__cTSOA:hover .ColorGrid_overlay__G4Zzm{opacity:1}.ColorGrid_learnMore__zKf4_{font-size:.8em}@media (min-width:480px){.ColorGrid_container__J_dmR{gap:8px}.ColorGrid_colorBox__cTSOA{border-radius:6px}.ColorGrid_overlay__G4Zzm{font-size:14px}}@media (min-width:768px){.ColorGrid_container__J_dmR{gap:8px}.ColorGrid_colorBox__cTSOA{border-radius:8px}.ColorGrid_overlay__G4Zzm{font-size:16px}}@media (min-width:1024px){.ColorGrid_overlay__G4Zzm{font-size:18px}}