.color-pad-wrapper{display:inline-block}.color-pad-wrapper .color-pad-icon,.color-pad-wrapper:hover .color-pad-text{display:none}.color-pad-wrapper:hover .color-pad-icon{display:inline-block}.grid-design-system{display:grid;gap:24px;grid-template-rows:auto;grid-template-columns:repeat(1,1fr);grid-template-areas:"buttonsContained" "buttonsOutlined" "buttonsText" "toastMessage" "inputs"}@media (min-width:768px){.grid-design-system{grid-template-columns:repeat(3,1fr);grid-template-areas:"buttonsContained buttonsOutlined buttonsText" "toastMessage inputs placeholder"}}@media (min-width:1024px){.grid-design-system{grid-template-columns:repeat(3,1fr);grid-template-areas:"buttonsContained buttonsOutlined buttonsText" "toastMessage inputs placeholder"}}.grid-dashboard{display:grid;gap:24px;grid-template-rows:auto;grid-template-columns:repeat(1,1fr);grid-template-areas:"revenue" "sales" "activeNow" "registrations" "graph" "transactions"}@media (min-width:768px){.grid-dashboard{grid-template-columns:repeat(2,1fr);grid-template-areas:"revenue sales" "activeNow registrations" "graph graph" "transactions transactions"}}@media (min-width:1024px){.grid-dashboard{grid-template-columns:repeat(8,1fr);grid-template-areas:"revenue revenue sales sales activeNow activeNow registrations registrations" "graph graph graph graph graph transactions transactions transactions"}}.grid-examples{display:grid;gap:24px;grid-template-rows:auto;grid-template-columns:repeat(1,1fr);grid-template-areas:"gradientCard" "imageGradient" "imageInfo" "chat" "inputCard" "actionCard" "card" "placeholder"}@media (min-width:600px){.grid-examples{grid-template-columns:repeat(2,1fr);grid-template-areas:"gradientCard imageGradient" "imageInfo imageInfo" "chat inputCard" "actionCard actionCard" "card placeholder"}}@media (min-width:900px){.grid-examples{grid-template-columns:repeat(3,1fr);grid-template-areas:"gradientCard imageGradient imageInfo" "chat inputCard placeholder" "actionCard actionCard card"}}