.red {
  color: var(--red);
}
.green {
  color: var(--green);
}
.main-color {
  color: var(--main-color);
}
.secondary-color {
  color: var(--secondary-color);
}
.grey-pastel {
  color: var(--grey-pastel);
}
.grey-light {
  color: var(--grey-light);
}
.grey {
  color: var(--grey);
}
.grey-dark {
  color: var(--grey-dark);
}
.white {
  color: var(--white);
}
.black {
  color: var(--black);
}

.bg-red {
  background-color: var(--red);
}
.bg-green {
  background-color: var(--green);
}
.bg-main-color {
  background-color: var(--main-color);
}
.bg-secondary-color {
  background-color: var(--secondary-color);
}
.bg-grey-pastel {
  background-color: var(--grey-pastel);
}
.bg-grey-light {
  background-color: var(--grey-light);
}
.bg-grey {
  background-color: var(--grey);
}
.bg-grey-dark {
  background-color: var(--grey-dark);
}
.bg-white {
  background-color: var(--white);
}

.bg-gradient {
  background: var(--bluegradient);
}

.bd-main-color {
  border: 1px solid var(--main-color);
}

.bd-top-main-color {
  border-top: 1px solid var(--main-color);
}

.bd-bottom-main-color {
  border-bottom: 1px solid var(--main-color);
}

.bd-grey-pastel {
  border: 1px solid var(--grey-pastel);
}