.color__content{grid-template-rows:1fr auto 1fr}.color__wrapper{display:grid;justify-content:center;grid-template-columns:repeat(auto-fill,clamp(100px,50px + 15vw,150px));gap:.375rem;grid-column:1 / -1;grid-row:2}.color__content--slim{justify-items:center}.color__wrapper--slim{width:fit-content;grid-template-columns:repeat(auto-fill,280px)}@media(min-width:768px){.color__content{max-width:768px}.color__wrapper{grid-template-columns:repeat(auto-fill,250px)}}@media(min-width:1024px){.color__content{max-width:1024px}}@media(min-width:1280px){.color__content{max-width:1280px}.color__wrapper{grid-template-columns:repeat(auto-fill,280px)}}.color-card{width:100%;height:100%;box-shadow:1px 2px 6px -1px hsla(var(--color-black),.1),1px 2px 4px -2px hsla(var(--color-black),.1)}.color-card__inner{height:100%;display:flex;flex-direction:column;gap:.375rem;border-radius:.5rem;border:1px solid var(--border-color);background-color:var(--bg-color-secondary);overflow:hidden;position:relative}.color-card__image{height:50px;border-radius:.5rem;transition:width .3s ease-out,height .3s ease-out}.color-card__title{font-size:.875rem;text-align:center;text-wrap-style:balance;color:var(--text-color-primary)}.color-card__inner--slim{flex-direction:row;align-items:center}.color-card__image--slim{width:45px;height:45px;margin:-1px 0 -1px -1px}@media(min-width:768px){.color-card__inner{flex-direction:row;align-items:center}.color-card__image{width:45px;height:45px;margin:-1px 0 0 -1px}}