Text init

.text-huge {font-size: rem(30px);line-height: 1.5;}
.text-xxxlarge {font-size: rem(28px);line-height: 1.5;}
.text-xxlarge {font-size: rem(24px);line-height: 1.5;}
.text-xlarge {font-size: rem(22px);line-height: 1.5;}
.text-large {font-size: rem(20px);line-height: 1.5;}
.text-medium {font-size: rem(18px);line-height: 1.5;}
.text-default {font-size: rem(16px);line-height: 1.5;}
.text-small {font-size: rem(14px);line-height: 1.5;}
.text-xsmall {font-size: rem(12px);line-height: 1.5;}
@media (min-width: 640px) {
  .text-huge-s {font-size: rem(30px)}
  .text-xxxlarge-s {font-size: rem(28px)}
  .text-xxlarge-s {font-size: rem(24px)}
  .text-xlarge-s {font-size: rem(22px)}
  .text-large-s {font-size: rem(20px)}
  .text-medium-s {font-size: rem(18px)}
  .text-default-s {font-size: rem(16px)}
  .text-small-s {font-size: rem(14px)}
  .text-xsmall-s {font-size: rem(12px)}
}
@media (min-width: 960px) {
  .text-huge-m {font-size: rem(30px)}
  .text-xxxlarge-m {font-size: rem(28px)}
  .text-xxlarge-m {font-size: rem(24px)}
  .text-xlarge-m {font-size: rem(22px)}
  .text-large-m {font-size: rem(20px)}
  .text-medium-m {font-size: rem(18px)}
  .text-default-m {font-size: rem(16px)}
  .text-small-m {font-size: rem(14px)}
  .text-xsmall-m {font-size: rem(12px)}
}
@media (min-width: 1200px) {
  .text-huge-l {font-size: rem(30px)}
  .text-xxxlarge-l {font-size: rem(28px)}
  .text-xxlarge-l {font-size: rem(24px)}
  .text-xlarge-l {font-size: rem(22px)}
  .text-large-l {font-size: rem(20px)}
  .text-medium-l {font-size: rem(18px)}
  .text-default-l {font-size: rem(16px)}
  .text-small-l {font-size: rem(14px)}
  .text-xsmall-l {font-size: rem(12px)}
}
@media (min-width: 1600px) {
  .text-huge-xl {font-size: rem(30px)}
  .text-xxxlarge-xl {font-size: rem(28px)}
  .text-xxlarge-xl {font-size: rem(24px)}
  .text-xlarge-xl {font-size: rem(22px)}
  .text-xlarge-xl {font-size: rem(20px)}
  .text-medium-xl {font-size: rem(18px)}
  .text-default-xl {font-size: rem(16px)}
  .text-small-xl {font-size: rem(14px)}
  .text-xsmall-xl {font-size: rem(12px)}
}

.text-white { color: #fff!important}
.text-dark {color: #222}
.text-light {color: #444}
.text-gray {color: #666}
.text-light-gray {color: #ccc}
.text-red {color: #EC4B4B}
.text-yellow {color: $yellow}

.text-spacing {letter-spacing: .2rem}
.text-remove-spacing {letter-spacing: 0}
.text-small-spacing {letter-spacing: .1rem}
.text-medium-spacing {letter-spacing: .4rem}
.text-large-spacing {letter-spacing: .6rem}
@media (min-width: 640px) { 
  .text-remove-spacing-s {letter-spacing: 0}
  .text-small-spacing-s {letter-spacing: .1rem}
  .text-medium-spacing-s {letter-spacing: .4rem}
  .text-large-spacing-s {letter-spacing: .6rem}
}
@media (min-width: 960px) { 
  .text-remove-spacing-m {letter-spacing: 0}
  .text-small-spacing-m {letter-spacing: .1rem}
  .text-medium-spacing-m {letter-spacing: .4rem}
  .text-large-spacing-m {letter-spacing: .6rem}  
}
@media (min-width: 1200px) {
  .text-remove-spacing-l {letter-spacing: 0}
  .text-small-spacing-l {letter-spacing: .1rem}
  .text-medium-spacing-l {letter-spacing: .4rem}
  .text-large-spacing-l {letter-spacing: .6rem}  
 }


.text-small-height { line-height: 1.2rem }
.text-default-height { line-height: 1.5rem }
.text-height { line-height: 2rem }
.text-medium-height { line-height: 2.5rem }
.text-large-height { line-height: 4rem }
@media (min-width: 640px) { 
  .text-small-height-s { line-height: 1rem }
  .text-medium-height-s { line-height: 2.5rem }
  .text-large-height-s { line-height: 4rem }
}
@media (min-width: 960px) { 
  .text-small-height-m { line-height: 1rem }
  .text-medium-height-m { line-height: 2.5rem }
  .text-large-height-m { line-height: 4rem }
}
@media (min-width: 1200px) { 
  .text-small-height-l { line-height: 1rem }
  .text-medium-height-l { line-height: 2.5rem }
  .text-large-height-l { line-height: 4rem }
}

.text-vertical {writing-mode: vertical-lr;transform: rotate(-180deg)}
.text-italic {font-style: italic}
.text-serif {font-family: 'Noto Serif TC', serif}
.text-logo-font {font-family:"Yeseva One" ;}

.text-weight {font-weight: normal}
.text-small-weight {font-weight:300}
.text-medium-weight {font-weight:500}
.text-large-weight {font-weight:600}
@media (min-width: 640px) { 
  .text-small-weight-s {font-weight:300}
  .text-large-weight-s {font-weight:600}
}
@media (min-width: 960px) { 
  .text-small-weight-m {font-weight:300}
  .text-large-weight-m {font-weight:600}
}
@media (min-width: 1200px) { 
  .text-small-weight-l {font-weight:300}
  .text-large-weight-l {font-weight:600}
}