.countdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.countdown__title {
  color: white;
  text-align: center;
}
.countdown__title-line + .countdown__title-line {
  margin-top: 15px;
}
.countdown__subtitle {
  margin-top: 50px;
  text-align: center;
}
.countdown__date {
  display: block;
  background: #000;
  padding: 5px;
  white-space: nowrap;
  text-align: center;
  max-width: 350px;
  margin: 15px auto 0;
}
.countdown__dot {
  display: none;
}
.countdown__codemia {
  color: #f49830;
}
.countdown__complete {
  margin-top: 30px;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
  row-gap: 15px;
}
.date {
  display: flex;
  justify-content: center;
  color: #f49830;
  animation: date 1s infinite alternate;
  margin: 0;
  font-size: 200%;
}
.date-title {
  display: flex;
  justify-content: center;
  color: #f49830;
  margin: 0;
  font-size: 80%;
}
@keyframes date {
  from {
    color: #f49830;
  }
  to {
    color: #4eb1a4;
  }
}
@media (min-width: 640px) {
  .countdown__subtitle {
    margin-top: 100px;
  }
  .countdown__complete {
    margin-top: 70px;
  }
  .countdown__date {
    margin-top: 20px;
  }
}
@media (min-width: 1024px) {
  .countdown__date {
    display: inline;
    margin: 10px 0 0 5px;
  }
  .countdown__dot {
    display: inline;
  }
  .date {
    font-size: 300%;
  }
  .date-title {
    font-size: 120%;
  }
}
@media (min-width: 1280px) {
  .date {
    font-size: 275%;
  }
  .date-title {
    font-size: 110%;
  }
}
@media (min-width: 1536px) {
  .date {
    font-size: 375%;
  }
  .date-title {
    font-size: 150%;
  }
}