:root {
  --canvas-width: 1014px;
  --canvas-height: 415px;

  /* Foreground layer positions */
  --logo-x: 3%;
  --logo-y: 4%;
  --logo-w: 11%;

  --identity-x: 13%;
  --identity-y: 4%;
  --identity-w: 47%;

  --countdown-x: 9%;
  --countdown-y: 25%;
  --countdown-w: 30%;

  --emblem-x: 60%;
  --emblem-y: 7%;
  --emblem-w: 35%;

  --anniversary-x: 56%;
  --anniversary-y: 55%;
  --anniversary-w: 39%;

  --tagline-x: 58%;
  --tagline-y: 72%;
  --tagline-w: 36%;

  --blue: #0755a0;
  --gold: #bb8118;
}

/* =========================================
   ONLY COUNTDOWN AREA
   ========================================= */

.icb-countdown {
  width: 100%;
  margin: 0 auto 20px auto;
  text-align: center;
}

/* Responsive master canvas */
.icb-countdown .banner {
  position: relative;
  width: min(100%, var(--canvas-width));
  aspect-ratio: 574 / 235;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  margin: 0 auto;
}

/* Background */
.icb-countdown .background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Foreground layers */
.icb-countdown .layer {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.icb-countdown .logo {
  left: var(--logo-x);
  top: var(--logo-y);
  width: var(--logo-w);
}

.icb-countdown .identity {
  left: var(--identity-x);
  top: var(--identity-y);
  width: var(--identity-w);
}

.icb-countdown .emblem {
  left: var(--emblem-x);
  top: var(--emblem-y);
  width: var(--emblem-w);
}

.icb-countdown .anniversary {
  left: var(--anniversary-x);
  top: var(--anniversary-y);
  width: var(--anniversary-w);
}

.icb-countdown .tagline {
  left: var(--tagline-x);
  top: var(--tagline-y);
  width: var(--tagline-w);
}

/* Countdown circle */
.icb-countdown .countdown {
  position: absolute;
  left: var(--countdown-x);
  top: var(--countdown-y);
  width: var(--countdown-w);
  aspect-ratio: 1;
  z-index: 3;
}

.icb-countdown .countdown-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.icb-countdown .countdown-content {
  position: absolute;
  inset: 18% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  text-align: center;
}

.icb-countdown .countdown-heading,
.icb-countdown .countdown-footer {
  font-size: 1.74cqw;
  font-weight: 700;
  line-height: 1;
}

.icb-countdown .countdown-heading {
  margin-bottom: 6%;
}

.icb-countdown .countdown-footer {
  margin-top: 8%;
}

.icb-countdown .units {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  gap: 4%;
}

.icb-countdown .unit {
  min-width: 0;
}

.icb-countdown .unit strong {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: .95;
  border-radius: 15%;
  background: linear-gradient(145deg,#0b67b7,#003d85);
  color: white;
  box-shadow: inset 0 1px 4px #ffffff55,
              0 2px 5px #002d6540;
  font-size: 2.61cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.icb-countdown .unit span {
  display: block;
  margin-top: 12%;
  color: #a86d08;
  font-size: .87cqw;
  white-space: nowrap;
}

.icb-countdown .finished {
  position: absolute;
  inset: 34% 5% auto;
  padding: 6%;
  border: max(1px, .17cqw) solid var(--gold);
  border-radius: .7cqw;
  background: #fff;
  font-size: 1.57cqw;
  font-weight: 800;
}


/* =========================================
   MOBILE / SMALL SCREEN
   ========================================= */

@media (max-width: 850px) {

  .icb-countdown {
    width: 100%;
  }

  .icb-countdown .banner {
    width: 100%;
    max-width: 780px;
  }
}