.example-1, .example-2, .example-3, .example-4, .example-5 {
  background: #d5c3e2;
  text-align: center;
  padding: 1rem; }

.example-1 {
  font-size: 14px; }
@media screen and (min-width: 320px) {
  .example-1 {
    font-size: calc(14px + 8 * ((100vw - 320px) / 960)); } }
@media screen and (min-width: 1280px) {
  .example-1 {
    font-size: 22px; } }

.example-2 {
  font-size: 0.875rem; }
@media screen and (min-width: 20rem) {
  .example-2 {
    font-size: calc(0.875rem + 0.5 * ((100vw - 20rem) / 60)); } }
@media screen and (min-width: 80rem) {
  .example-2 {
    font-size: 1.375rem; } }

.example-3 {
  font-size: 22px; }
@media screen and (min-width: 320px) {
  .example-3 {
    font-size: calc(22px + -8 * ((100vw - 320px) / 960)); } }
@media screen and (min-width: 1280px) {
  .example-3 {
    font-size: 14px; } }

.example-4 {
  line-height: 1.2em; }
@media screen and (min-width: 20em) {
  .example-4 {
    line-height: calc(1.2em + 0.6 * ((100vw - 20em) / 60)); } }
@media screen and (min-width: 80em) {
  .example-4 {
    line-height: 1.8em; } }

.example-5 {
  margin: 0 auto;
  border: solid 1px black; }
.example-5 {
  width: 200px; }
@media screen and (min-width: 320px) {
  .example-5 {
    width: calc(200px + 300 * ((100vw - 320px) / 960)); } }
@media screen and (min-width: 1280px) {
  .example-5 {
    width: 500px; } }