.ribbon {
  width: 240px;
  height: 240px;
  position: absolute;
  left: 0;
  top: 0;
}
.old-price {
  text-decoration: line-through;
  font-size: 1.2rem;
}
.new-price {
  background: var(--primary);
  color: white;
  font-size: 1.6rem;
  padding: 0.2rem 0.4rem;
  margin-left: 0.4rem;
}

#countdown {
  font-size: 2.1rem;
}

.date {
  font-size: 4rem;
  font-weight: bold;
  display: inline-block;
}
.date-label {
  font-size: 1.2rem;
  display: block;
  font-weight: normal;
  color: var(--gray);
}

.qr-code {
  max-width: 240px;
  box-shadow: 2px 2px 20px rgba(64, 64, 64, 0.25);
  border-radius: 6px;
  padding: 12px;
  margin: 0 auto;
}

.countdown-v2 {
  background: var(--primary);
  color: white;
}

.countdown-v2 .date-label {
  color: white;
}

.countdown-typo {
  font-size: 2rem;
}

.card-header {
  padding-bottom: 0;
}
.card {
}
.card:hover {
  transform: scale(1.02);
  transition: 0.3s all ease-in-out;
}
.card-body {
  background-image: url('../img/15-ribbon.svg');
  background-size: 92px 92px;
  padding: 2rem;
  background-repeat: no-repeat;
  background-position: 100% 0%;
}

.columns-container {
  background: white;
}

footer {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #14191e;
  color: white;
}

@media (max-width: 1023px) {
  .card-deck .card {
    flex: 1 100%;
  }
}

.btn-primary {
  color: white !important;
  font-weight: bold;
}