@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

.bold-80px {
  font-size: 80px;
  font-weight: 700;
}

.bold-56px {
  font-size: 56px;
  font-weight: 700;
}

.bold-32px {
  font-size: 28px;
  font-weight: 700;
}

.bold-24px {
  font-size: 24px;
  font-weight: 700;
}

.bold-20px {
  font-size: 18px;
  font-weight: 700;
}

.bold-16px {
  font-size: 16px;
  font-weight: 700;
}

.semibold-56px {
  font-size: 40px;
  font-weight: 550;
}

.semibold-24px {
  font-size: 24px;
  font-weight: 550;
}

.regular-56px {
  font-size: 56px;
  font-weight: 450;
}

.regular-32px {
  font-size: 26px;
  font-weight: 450;
}

.regular-24px {
  font-size: 24px;
  font-weight: 450;
}

.regular-20px {
  font-size: 16px;
  font-weight: 450;
}

.light-80px {
  font-size: 59px;
  font-weight: 300;
}

.light-24px {
  font-size: 20px;
  font-weight: 300;
}

.light-20px {
  font-size: 20px;
  font-weight: 300;
}

.light-18px {
  font-size: 18px;
  font-weight: 300;
}

.light-16px {
  font-size: 16px;
  font-weight: 300;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (max-width: 1200px) {
  .light-80px,
  .bold-80px {
    font-size: 60px;
  }

  .regular-32px {
    font-size: 28px;
  }

  .light-24px,
  .bold-24px {
    font-size: 20px;
  }
  .bold-56px {
    font-size: 50px;
    font-weight: 700;
  }
}

@media only screen and (max-width: 992px) {
  .light-80px,
  .bold-80px,
  .semibold-56px,
  .regular-56px {
    font-size: 55px;
  }

  .regular-32px {
    font-size: 26px;
  }

  .light-24px,
  .light-20px,
  .bold-24px {
    font-size: 20px;
  }
  .bold-56px {
    font-size: 42px;
    font-weight: 700;
  }
}

@media only screen and (max-width: 768px) {
  .light-80px,
  .bold-80px,
  .semibold-56px {
    font-size: 40px;
  }

  .regular-32px {
    font-size: 24px;
  }

  .semibold-24px {
    font-size: 22px;
  }
  .light-24px,
  .light-20px,
  .bold-24px {
    font-size: 18px;
  }
  .bold-56px {
    font-size: 32px;
    font-weight: 700;
  }
}

@media only screen and (max-width: 600px) {
  .light-80px,
  .bold-80px,
  .semibold-56px,
  .regular-56px {
    font-size: 35px;
  }

  .regular-32px {
    font-size: 22px;
  }

  .semibold-24px {
    font-size: 22px;
  }

  .light-24px,
  .light-20px,
  .light-18px,
  .bold-24px {
    font-size: 16px;
  }
  .bold-56px {
    font-size: 28px;
    font-weight: 700;
  }
}

@media only screen and (max-width: 500px) {
  .light-80px,
  .bold-80px,
  .semibold-56px,
  .regular-56px {
    font-size: 26px;
  }
  .semibold-24px {
    font-size: 20px;
  }

  .light-24px,
  .light-20px,
  .light-18px {
    font-size: 16px;
  }
}