.units {
  display: flex;
  font-size: 50px;
  gap: 50px;
}

.units__col {
  flex: 0 1 50%;
}

.units__col h2 {
  text-align: center;
}

.units__item {
  font-size: 30px;
  background-color: rgb(224, 224, 224);
  margin-bottom: 5px;
  padding-left: 20px;
}

.line {
  height: 2px;
  background-color: #333;
  margin: 50px 0;
}

p {
  font-size: 40px;
}

.em__quad, .vhw__quad, .rem__quad, .percents__quad {
  width: 200px;
  height: 200px;
  background-color: #333;
}

.percents__parent-quad {
  background-color: green;
}

.percents__child-quad {
  background-color: #333;
}

/* -------------------------------------------- */
/* percents */

.percents__parent-quad {
  width: 500px;
  height: 500px;
}

.percents__child-quad {
  width: 50%;
  height: 90%;
}

.percents__text {
  font-size: 200%;
  line-height: 200%;
}

.percents__quad {
  padding: 5%;
  margin: 5%;
}

/* VH и VW */

.vhw__quad {
  width: 50vw;
  height: 10vh;
}

.vhw__text-1 {
  font-size: 2vw;
}

/* EM и REM */

.em__text {
  font-size: 20px;
  height: 5em;
  line-height: 2em;
}

.rem__text {
  font-size: 2rem;
}