:root {
  --primary-color: #333f66;
  --secondary-color: #fff;
}

.bg {
  &__transparent {
    background-color: transparent !important;
  }

  &__white {
    background-color: #fff;
  }

  &__dark {
    background-color: #f5f8fa;
  }

  &__red {
    background: #eb1c2f;
  }

  &__gray {
    background: #f8f8f8;
  }

  &__blue {
    background: #103262;
  }
}

.text {

  // Color
  &__dark {
    color: #01193d;
  }

  &__white {
    color: var(--secondary-color);
  }

  &__dark {
    color: var(--primary-color);
  }

  &__light {
    color: #818899 !important;
  }

  &__dark-blue {
    color: #21325e;
  }

  &__purple {
    color: #424874;
  }

  &__blue {
    color: #00509d;
  }

  &__light-blue {
    color: #3083ff;
  }

  &__gray {
    color: #707070;
  }

  &__red {
    color: #eb1c2f;
  }

  &__blue {
    color: #103262;
  }

  &__orange {
    color: #FF9B18;
  }

  // font-Weight
  &__bold {
    font-weight: bold;
  }

  &__medium {
    font-weight: 450;
  }

  &__semibold {
    font-weight: 560;

  }

  // Position
  &__center {
    text-align: center;
    justify-content: center;
  }

  &__justify {
    text-align: justify;
  }

  // Size
  @for $i from 8 to 60 {
    &__#{$i} {
      $em: calc($i / 16);
      font-size: #{$em}+"em";
    }
  }
}

.line-clamp {
  &__1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__7 {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__8 {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__9 {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flickity-page-dots {
  .dot {
    transition: all 0.2s linear;
  }
}

.gap-30 {
  gap: 30px;
}