.campaign-countdown {
  position: relative;
  overflow: hidden;
  color: #0f2942;
  background: #f8c52c;
}

.campaign-countdown::before {
  position: absolute;
  top: 0;
  right: clamp(1rem, 6vw, 6rem);
  width: clamp(13rem, 30vw, 28rem);
  height: 100%;
  content: '';
  border-right: 1px solid rgba(15, 41, 66, .11);
  border-left: 1px solid rgba(15, 41, 66, .11);
  transform: skewX(-18deg);
  pointer-events: none;
}

.campaign-countdown__shell {
  position: relative;
  display: grid;
  width: min(calc(100% - 2rem), 80rem);
  min-height: 31rem;
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 7.5rem) 0;
  align-items: end;
  grid-template-columns: minmax(20rem, .9fr) minmax(34rem, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
}

.campaign-countdown__intro {
  align-self: center;
}

.campaign-countdown__date {
  display: flex;
  margin: 0 0 1.5rem;
  align-items: center;
  gap: .8rem;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.campaign-countdown__date::before {
  width: 2.5rem;
  height: 2px;
  content: '';
  background: currentColor;
}

.campaign-countdown__date time {
  padding-left: .8rem;
  border-left: 1px solid rgba(15, 41, 66, .28);
  letter-spacing: .04em;
}

.campaign-countdown__title {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.65rem, 4.6vw, 5rem);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.campaign-countdown__timer {
  display: grid;
  align-self: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid #0f2942;
  border-bottom: 2px solid #0f2942;
}

.campaign-countdown__unit {
  position: relative;
  display: flex;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(.7rem, 1.6vw, 1.4rem);
  flex-direction: column;
  gap: .65rem;
}

.campaign-countdown__unit + .campaign-countdown__unit {
  border-left: 1px solid rgba(15, 41, 66, .28);
}

.campaign-countdown__value {
  font-size: clamp(3.4rem, 6.4vw, 6.35rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.075em;
  font-variant-numeric: tabular-nums;
}

.campaign-countdown__label {
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.campaign-countdown.is-active .campaign-countdown__timer {
  opacity: .38;
}

@media (max-width: 980px) {
  .campaign-countdown__shell {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .campaign-countdown__title {
    max-width: 15ch;
  }
}

@media (max-width: 639px) {
  .campaign-countdown__shell {
    width: calc(100% - 2rem);
    padding: 4rem 0 4.5rem;
    gap: 2.5rem;
  }

  .campaign-countdown__date {
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
    font-size: .62rem;
  }

  .campaign-countdown__title {
    max-width: 13ch;
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }

  .campaign-countdown__timer {
    grid-template-columns: repeat(2, 1fr);
  }

  .campaign-countdown__unit {
    padding: 1.5rem 1rem;
  }

  .campaign-countdown__unit:nth-child(3) {
    border-left: 0;
  }

  .campaign-countdown__unit:nth-child(n + 3) {
    border-top: 1px solid rgba(15, 41, 66, .28);
  }

  .campaign-countdown__value {
    font-size: clamp(3.75rem, 20vw, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-countdown__value { transition: none; }
}