.sg-colors-page{width:100%;display:flex;flex-direction:column;gap:2rem}.sg-colors-page .sg-colors-page__header{display:flex;flex-direction:column;gap:1rem}.sg-colors-page .sg-colors-page__color-palette{display:grid;grid-template-columns:repeat(9,1fr);padding:0 2rem;gap:1.5rem;align-items:center;justify-items:center;overflow-x:auto}@media(max-width:1280px){.sg-colors-page .sg-colors-page__color-palette{gap:1rem}}@media(max-width:1024px){.sg-colors-page .sg-colors-page__color-palette{gap:1rem}}@media(max-width:768px){.sg-colors-page .sg-colors-page__color-palette{gap:.5rem}}@media(max-width:640px){.sg-colors-page .sg-colors-page__color-palette{gap:.5rem}}.sg-colors-page__divider{border:none;border-top:1px solid #122d3f;margin:4rem -4rem}@media(max-width:1280px){.sg-colors-page__divider{margin-left:-2rem;margin-right:-2rem}}@media(max-width:768px){.sg-colors-page__divider{margin-left:-.5rem;margin-right:-.5rem}}.sg-colors-page__contrasts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2.5rem;width:100%;box-sizing:border-box}@media(max-width:1024px){.sg-colors-page__contrasts{grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:1.5rem}}@media(max-width:768px){.sg-colors-page__contrasts{grid-template-columns:1fr;gap:1rem;padding:1rem}}@media(max-width:640px){.sg-colors-page__contrasts{padding:.5rem;gap:.5rem}}.hex-card-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem}.hex-card{background:#fff;border-radius:.75rem;box-shadow:0 2px 8px #00000014;padding:1.25rem;display:flex;flex-direction:column;align-items:center;width:180px;gap:1rem;border:none;flex-shrink:0;height:fit-content;transition:box-shadow .3s ease,transform .3s ease}.hex-card--highlighted{border:22px solid var(--hex-card-color);border-left:26px solid var(--hex-card-color);border-right:26px solid var(--hex-card-color);width:220px;border-radius:20px;padding:0}.hex-card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:scale(1.03)}@media(max-width:1024px){.hex-card{width:170px;padding:1rem}.hex-card--highlighted{width:210px;border:18px solid var(--hex-card-color);border-left:22px solid var(--hex-card-color);border-right:22px solid var(--hex-card-color)}}@media(max-width:768px){.hex-card{width:150px;padding:.875rem}.hex-card--highlighted{width:190px;border:16px solid var(--hex-card-color);border-left:20px solid var(--hex-card-color);border-right:20px solid var(--hex-card-color)}}@media(max-width:640px){.hex-card{width:115px;padding:.625rem}.hex-card--highlighted{width:145px;border:12px solid var(--hex-card-color);border-left:16px solid var(--hex-card-color);border-right:16px solid var(--hex-card-color)}}.hex-card__preview{width:100%;height:80px;border-radius:.5rem;box-shadow:0 1px 4px #0000000f;border:1px solid #e9e9e9;background-color:var(--hex-card-color)}@media(max-width:1024px){.hex-card__preview{height:70px}}@media(max-width:768px){.hex-card__preview{height:60px}}@media(max-width:640px){.hex-card__preview{height:50px}}.hex-card__info{text-align:center;flex-direction:column;display:flex;gap:.5rem}.hex-card__label,.hex-card__code{font-size:1rem;font-weight:500;color:#122d3f;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}@media(max-width:768px){.hex-card__label,.hex-card__code{font-size:.875rem}}@media(max-width:640px){.hex-card__label,.hex-card__code{font-size:.75rem}}.hex-card__principal{text-align:center;font-size:1rem;font-weight:400;color:#122d3f}@media(max-width:768px){.hex-card__principal{font-size:.875rem}}@media(max-width:640px){.hex-card__principal{font-size:.75rem}}.hex-card-highlighted-container{outline:8px solid var(--hex-card-color);border-radius:12px;padding:24px 16px;width:100%;height:fit-content;display:flex;flex-direction:column;align-items:center;gap:16px}@media(max-width:1024px){.hex-card-highlighted-container{outline:26px solid var(--hex-card-color);padding:20px 14px;gap:12px}}@media(max-width:768px){.hex-card-highlighted-container{outline:26px solid var(--hex-card-color);padding:16px 12px;gap:10px}}@media(max-width:640px){.hex-card-highlighted-container{outline:20px solid var(--hex-card-color);padding:12px 8px;gap:8px}}.contrast-card{border-radius:16px;padding:3rem 4rem;display:flex;align-items:center;justify-content:center;min-height:200px;box-shadow:0 2px 8px #00000014;width:100%;box-sizing:border-box;overflow:hidden;transition:box-shadow .3s ease,transform .3s ease}.contrast-card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:scale(1.03)}@media(max-width:1280px){.contrast-card{padding:2.5rem 3rem;min-height:190px}}@media(max-width:1024px){.contrast-card{padding:2.5rem 3rem;min-height:180px}}@media(max-width:768px){.contrast-card{min-height:170px;padding:2.5rem 2rem}}@media(max-width:640px){.contrast-card{min-height:160px;padding:2rem 1rem}}@media(max-width:480px){.contrast-card{min-height:140px;padding:1.5rem .5rem}}.contrast-card__swatches-container{display:flex;flex-direction:column;gap:1rem;align-items:center;width:100%;max-width:100%}@media(max-width:1024px){.contrast-card__swatches-container{gap:.5rem}}@media(max-width:768px){.contrast-card__swatches-container{gap:.5rem}}@media(max-width:640px){.contrast-card__swatches-container{gap:.25rem}}@media(max-width:480px){.contrast-card__swatches-container{gap:6px}}.contrast-card__swatches{display:flex;flex-wrap:wrap;gap:1rem;max-width:280px;width:100%;justify-content:center}.contrast-card__swatches--row{display:flex;gap:1rem;max-width:100%;justify-content:center;flex-wrap:nowrap;flex:1 1 auto}@media(max-width:1280px){.contrast-card__swatches{gap:.5rem;max-width:260px}.contrast-card__swatches--row{gap:.5rem}}@media(max-width:1024px){.contrast-card__swatches{gap:.5rem;max-width:240px}.contrast-card__swatches--row{gap:.5rem}}@media(max-width:768px){.contrast-card__swatches{gap:.5rem;max-width:220px}.contrast-card__swatches--row{gap:.5rem}}@media(max-width:640px){.contrast-card__swatches{gap:.25rem;max-width:200px}.contrast-card__swatches--row{gap:.25rem}}@media(max-width:480px){.contrast-card__swatches{gap:6px;max-width:180px}.contrast-card__swatches--row{gap:6px}}@media(max-width:380px){.contrast-card__swatches{gap:4px;max-width:160px}.contrast-card__swatches--row{gap:4px}}.contrast-card__swatch{width:56px;flex:0 1 56px;min-width:28px;min-height:28px;aspect-ratio:1;border-radius:8px;box-shadow:0 1px 4px #0000001a}@media(max-width:1280px){.contrast-card__swatch{width:52px;flex:0 1 52px;min-width:26px;min-height:26px;border-radius:7px}}@media(max-width:1024px){.contrast-card__swatch{width:48px;flex:0 1 48px;min-width:24px;min-height:24px;border-radius:7px}}@media(max-width:768px){.contrast-card__swatch{width:44px;flex:0 1 44px;min-width:22px;min-height:22px;border-radius:6px}}@media(max-width:640px){.contrast-card__swatch{width:40px;flex:0 1 40px;min-width:20px;min-height:20px;border-radius:6px}}@media(max-width:480px){.contrast-card__swatch{width:36px;flex:0 1 36px;min-width:18px;min-height:18px;border-radius:5px}}@media(max-width:380px){.contrast-card__swatch{width:32px;flex:0 1 32px;min-width:16px;min-height:16px;border-radius:4px}}