.color-cards{display:flex;flex-wrap:wrap;justify-content:center;max-width:792px;margin:0 auto}.color-card{color:#000;padding:24px 24px;margin:0 auto;aspect-ratio:1/1;transition:all .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;text-decoration:none;text-align:left;background-color:#fff;max-width:250px;width:100%;box-shadow:0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12)}@media only screen and (min-width:640px){.color-card{aspect-ratio:1/1}}.color-card__contents{z-index:1;height:100%;display:flex;flex-flow:column nowrap;color:rgba(0,0,0,.9)}.color-card__title{margin-top:12px;font-family:'Styrene A',Verdana,'Helvetica Neue',sans-serif;font-size:1em}.color-card__title:first-child{margin-top:0}.color-card__cta{margin-top:auto;text-decoration:underline}.color-card .pill{margin-left:-11px}.color-card:after{content:"";position:absolute;display:block;width:50px;height:50px;border-radius:50%;left:50%;transform:translate(-50%);opacity:0;transition:.4s all}.color-card:hover{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)}.color-card:hover:after{width:500px;height:500px;opacity:1;background-color:#f2f2f2}.color-card--light-magenta{background-color:#fff}.color-card--light-magenta:hover:after{background-color:#fbbdfb}.color-card--light-magenta .pill{background-color:#fbbdfb}.color-card--light-sky{background-color:#fff}.color-card--light-sky:hover:after{background-color:#bde6fb}.color-card--light-sky .pill{background-color:#bde6fb}.color-card--light-lemon{background-color:#fff}.color-card--light-lemon:hover:after{background-color:#fff3bd}.color-card--light-lemon .pill{background-color:#fff3bd}.color-card--light-green{background-color:#fff}.color-card--light-green:hover:after{background-color:#bdfbdc}.color-card--light-green .pill{background-color:#bdfbdc}.color-card--light-lime{background-color:#fff}.color-card--light-lime:hover:after{background-color:#d2fbbd}.color-card--light-lime .pill{background-color:#d2fbbd}.color-card--light-cherry{background-color:#fff}.color-card--light-cherry:hover:after{background-color:#fbbdc7}.color-card--light-cherry .pill{background-color:#fbbdc7}.color-card--light-purple{background-color:#fff}.color-card--light-purple:hover:after{background-color:#d7cdfd}.color-card--light-purple .pill{background-color:#d7cdfd}.color-card--light-orange{background-color:#fff}.color-card--light-orange:hover:after{background-color:#fed4bd}.color-card--light-orange .pill{background-color:#fed4bd}.color-card--filled.color-card--light-magenta{background-color:#fbbdfb}.color-card--filled.color-card--light-magenta .pill{background-color:#f891f8}.color-card--filled.color-card--light-magenta:hover .pill{background-color:#fbbdfb}.color-card--filled.color-card--light-magenta:hover:after{background-color:#f891f8}.color-card--filled.color-card--light-sky{background-color:#bde6fb}.color-card--filled.color-card--light-sky .pill{background-color:#91d6f8}.color-card--filled.color-card--light-sky:hover .pill{background-color:#bde6fb}.color-card--filled.color-card--light-sky:hover:after{background-color:#91d6f8}.color-card--filled.color-card--light-lemon{background-color:#fff3bd}.color-card--filled.color-card--light-lemon .pill{background-color:#ffda24}.color-card--filled.color-card--light-lemon:hover .pill{background-color:#fff3bd}.color-card--filled.color-card--light-lemon:hover:after{background-color:#ffda24}.color-card--filled.color-card--light-green{background-color:#bdfbdc}.color-card--filled.color-card--light-green .pill{background-color:#24f28c}.color-card--filled.color-card--light-green:hover .pill{background-color:#bdfbdc}.color-card--filled.color-card--light-green:hover:after{background-color:#24f28c}.color-card--filled.color-card--light-lime{background-color:#d2fbbd}.color-card--filled.color-card--light-lime .pill{background-color:#69f224}.color-card--filled.color-card--light-lime:hover .pill{background-color:#d2fbbd}.color-card--filled.color-card--light-lime:hover:after{background-color:#69f224}.color-card--filled.color-card--light-cherry{background-color:#fbbdc7}.color-card--filled.color-card--light-cherry .pill{background-color:#f891a2}.color-card--filled.color-card--light-cherry:hover .pill{background-color:#fbbdc7}.color-card--filled.color-card--light-cherry:hover:after{background-color:#f891a2}.color-card--filled.color-card--light-purple{background-color:#d7cdfd}.color-card--filled.color-card--light-purple .pill{background-color:#bdacfd}.color-card--filled.color-card--light-purple:hover .pill{background-color:#d7cdfd}.color-card--filled.color-card--light-purple:hover:after{background-color:#bdacfd}.color-card--filled.color-card--light-orange{background-color:#fed4bd}.color-card--filled.color-card--light-orange .pill{background-color:#feb890}.color-card--filled.color-card--light-orange:hover .pill{background-color:#fed4bd}.color-card--filled.color-card--light-orange:hover:after{background-color:#feb890}.color-card--lg .color-card__title{font-size:1.2em}.color-card--fill-width{max-width:none}.color-cards__container{display:grid;grid-column-gap:20px;grid-row-gap:20px;grid-template-columns:repeat(2,1fr);grid-template-rows:max-content;max-width:980px;padding:0 36px;margin:0 auto}@media only screen and (min-width:640px){.color-cards__container{grid-template-columns:repeat(3,1fr);padding:0 40px}}@media only screen and (min-width:960px){.color-cards__container{grid-template-columns:repeat(4,1fr);padding:0 20px}}@media only screen and (min-width:960px){.color-cards__container--max-three{grid-template-columns:repeat(3,1fr);padding:0 40px}}