.sg-nav {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  text-align: center;
}
.sg-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  list-style: none;
}

.sg-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.sg-card {
  border: 1px solid #F1F1F1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 16px;
  min-width: 260px;
  padding: 24px;
}
.sg-card__title {
  color: #000000;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.875rem;
}
.sg-card__stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sg-card__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sg-card__label {
  color: #8F8F8F;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.sg-token-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.sg-swatch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-swatch__color {
  border: 1px solid #F1F1F1;
  border-radius: 8px;
  height: 80px;
}
.sg-swatch__name {
  color: #000000;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
}
.sg-swatch__value {
  color: #8F8F8F;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
}

.sg-swatch--brand-main .sg-swatch__color {
  background-color: #071E45;
}

.sg-swatch--brand-primary .sg-swatch__color {
  background-color: #FD8B0E;
}

.sg-swatch--brand-secondary .sg-swatch__color {
  background-color: #4D5969;
}

.sg-swatch--brand-tertiary .sg-swatch__color {
  background-color: #DFD8CB;
}

.sg-swatch--brand-quartenary .sg-swatch__color {
  background-color: #FFB702;
}

.sg-swatch--gradient-primary .sg-swatch__color {
  background: linear-gradient(90deg, #FFB702 0%, #FD8B0E 100%);
}

.sg-swatch--gradient-navy-orange .sg-swatch__color {
  background: linear-gradient(90deg, #071E45 0%, #0F2145 50%, #4D3B3B 78%, #C76B21 100%);
}

.sg-swatch--gradient-navy-graphite .sg-swatch__color {
  background: linear-gradient(90deg, #071E45 0%, #4D5969 100%);
}

.sg-swatch--gradient-white-beige .sg-swatch__color {
  background: linear-gradient(90deg, #FFFFFF 0%, #F4F0E9 45%, #E3DCCE 100%);
}

.sg-swatch--neutral-0 .sg-swatch__color {
  background-color: #FFFFFF;
}

.sg-swatch--neutral-100 .sg-swatch__color {
  background-color: #F5F5F5;
}

.sg-swatch--neutral-200 .sg-swatch__color {
  background-color: #F1F1F1;
}

.sg-swatch--neutral-300 .sg-swatch__color {
  background-color: #DCDCDC;
}

.sg-swatch--neutral-400 .sg-swatch__color {
  background-color: #C0C0C0;
}

.sg-swatch--neutral-500 .sg-swatch__color {
  background-color: #AFAFAF;
}

.sg-swatch--neutral-600 .sg-swatch__color {
  background-color: #8F8F8F;
}

.sg-swatch--neutral-700 .sg-swatch__color {
  background-color: #7C7C7C;
}

.sg-swatch--neutral-800 .sg-swatch__color {
  background-color: #1E1E1E;
}

.sg-swatch--neutral-900 .sg-swatch__color {
  background-color: #000000;
}

.sg-token-size--2 {
  --token-size: 2px;
}

.sg-token-size--4 {
  --token-size: 4px;
}

.sg-token-size--6 {
  --token-size: 6px;
}

.sg-token-size--8 {
  --token-size: 8px;
}

.sg-token-size--12 {
  --token-size: 12px;
}

.sg-token-size--16 {
  --token-size: 16px;
}

.sg-token-size--18 {
  --token-size: 18px;
}

.sg-token-size--20 {
  --token-size: 20px;
}

.sg-token-size--24 {
  --token-size: 24px;
}

.sg-token-size--32 {
  --token-size: 32px;
}

.sg-token-size--40 {
  --token-size: 40px;
}

.sg-token-size--48 {
  --token-size: 48px;
}

.sg-token-size--56 {
  --token-size: 56px;
}

.sg-token-size--64 {
  --token-size: 64px;
}

.sg-token-size--72 {
  --token-size: 72px;
}

.sg-token-size--80 {
  --token-size: 80px;
}

.sg-token-size--88 {
  --token-size: 88px;
}

.sg-token-size--96 {
  --token-size: 96px;
}

.sg-token-size--104 {
  --token-size: 104px;
}

.sg-token-size--112 {
  --token-size: 112px;
}

.sg-token-size--120 {
  --token-size: 120px;
}

.sg-token-size--128 {
  --token-size: 128px;
}

.sg-token-size--360 {
  --token-size: 360px;
}

.sg-token-size--640 {
  --token-size: 640px;
}

.sg-token-size--768 {
  --token-size: 768px;
}

.sg-token-size--1024 {
  --token-size: 1024px;
}

.sg-token-size--1200 {
  --token-size: 1200px;
}

.sg-radius--0 {
  border-radius: 0;
}

.sg-radius--2 {
  border-radius: 2px;
}

.sg-radius--4 {
  border-radius: 4px;
}

.sg-radius--6 {
  border-radius: 6px;
}

.sg-radius--8 {
  border-radius: 8px;
}

.sg-radius--12 {
  border-radius: 12px;
}

.sg-radius--16 {
  border-radius: 16px;
}

.sg-radius--20 {
  border-radius: 20px;
}

.sg-radius--24 {
  border-radius: 24px;
}

.sg-radius--32 {
  border-radius: 32px;
}

.sg-radius--100 {
  border-radius: 100px;
}

.sg-measure-grid {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
}

.sg-measure {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 64px;
}
.sg-measure--start {
  align-items: flex-start;
}
.sg-measure__bar {
  background-color: #FD8B0E;
  border-radius: 2px;
  min-height: 2px;
  width: var(--token-size);
}
.sg-measure__box {
  align-items: center;
  background-color: #FD8B0E;
  color: #FFFFFF;
  display: flex;
  font-size: 0.75rem;
  height: var(--token-size);
  justify-content: center;
  max-height: 160px;
  min-height: 8px;
  width: var(--token-size);
}
.sg-measure__radius {
  background-color: #FD8B0E;
  height: 42px;
  width: 42px;
}
.sg-measure__container {
  background-color: #FD8B0E;
  border-radius: 2px;
  height: 16px;
  max-width: 100%;
  width: var(--token-size);
}
.sg-measure__label {
  color: #000000;
  font-size: 0.75rem;
  line-height: 1.25rem;
}
.sg-measure__value {
  color: #8F8F8F;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.sg-container-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sg-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.sg-token {
  display: inline-flex;
  line-height: 1;
}

.sg-token--fs-12 {
  font-size: 0.75rem;
}

.sg-token--fs-14 {
  font-size: 0.875rem;
}

.sg-token--fs-16 {
  font-size: 1rem;
}

.sg-token--fs-18 {
  font-size: 1.125rem;
}

.sg-token--fs-20 {
  font-size: 1.25rem;
}

.sg-token--fs-22 {
  font-size: 1.375rem;
}

.sg-token--fs-24 {
  font-size: 1.5rem;
}

.sg-token--fs-28 {
  font-size: 1.75rem;
}

.sg-token--fs-32 {
  font-size: 2rem;
}

.sg-token--fs-40 {
  font-size: 2.5rem;
}

.sg-token--fs-64 {
  font-size: 4rem;
}

.sg-token--fs-80 {
  font-size: 5rem;
}

.sg-token--fw-300 {
  font-weight: 300;
}

.sg-token--fw-400 {
  font-weight: 400;
}

.sg-token--fw-600 {
  font-weight: 600;
}

.sg-token--fw-700 {
  font-weight: 700;
}

.sg-token--lh-10 {
  line-height: 0.625rem;
}

.sg-token--lh-20 {
  line-height: 1.25rem;
}

.sg-token--lh-30 {
  line-height: 1.875rem;
}

.sg-token--lh-40 {
  line-height: 2.5rem;
}

.sg-token--lh-50 {
  line-height: 3.125rem;
}

.sg-token--lh-60 {
  line-height: 3.75rem;
}

.sg-token--lh-70 {
  line-height: 4.375rem;
}

.sg-token--lh-80 {
  line-height: 5rem;
}

.sg-token--lh-100 {
  line-height: 6.25rem;
}

.sg-variant {
  border: 1px dashed #F1F1F1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
.sg-variant--dark {
  background-color: #C0C0C0;
  border-color: #C0C0C0;
}
.sg-variant__label {
  color: #8F8F8F;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.sg-dark {
  background-color: #071E45;
  border-radius: 8px;
  padding: 24px;
}

.sg-swiper-slide {
  align-items: center;
  color: #000000;
  display: flex;
  height: 180px;
  justify-content: center;
}
.sg-swiper-slide--light {
  background-color: rgba(220, 220, 220, 0.4);
}
.sg-swiper-slide--medium {
  background-color: rgba(175, 175, 175, 0.4);
}
.sg-swiper-slide--dark {
  background-color: rgba(124, 124, 124, 0.4);
}

.input-range--45 {
  --value: 45%;
}

.swiper-slide.sg-swiper-slide {
  min-height: 180px;
}

/*# sourceMappingURL=example-page.css.map*/