.countdown {
    display: block;
    background-color: #ffd54f;
}
.countdown > p {
  color: red;
  font-family: 'Roboto', sans-serif;
  font-size: 2.0em;
  margin: 0 auto;
  padding-top: 0.5em;
  text-align: center;
}
.countdown > ul {
    text-align: center;
}
.countdown > ul li {
  display: inline-block;
  font-size: 1em;
  list-style-type: none;
  padding: 0.5em 1em;
  text-transform: uppercase;
  text-align: center;
}
.countdown > ul li span {
  display: block;
  font-size: 2.0rem;
}

@media all and (max-width: 768px) {
  .countdown > p {
    font-size: calc(1.5rem * var(--smaller));
  }
  .countdown > ul li {
    font-size: calc(1.125rem * var(--smaller));
  }
  .countdown > ul li span {
    font-size: calc(2.375rem * var(--smaller));
  }
}