.atvi-countdown-container {
  --countdown-background: #0d0c0a;
  --countdown-text-color: #f4f4f4;
  --countdown-accent-color: #ffd400;
  --countdown-horizontal-padding: 24px;
  align-items: center;
  box-sizing: border-box;
  color: var(--countdown-text-color);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}
.atvi-countdown-container *,
.atvi-countdown-container *::before,
.atvi-countdown-container *::after {
  box-sizing: border-box;
}
.atvi-countdown-inner-container {
  margin: 0 auto;
  max-width: 1440px;
  position: relative;
  width: 100%;
}
.atvi-countdown-active-container,
.atvi-countdown-inactive-container {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.atvi-countdown-active-container {
  display: flex;
}
.atvi-countdown-inactive-container {
  display: none;
}
.atvi-countdown-inactive-container.is-active {
  display: flex;
}
/* Countdown introductory text */
.atvi-countdown-active-caption {
  margin-bottom: 40px;
}
.atvi-countdown-active-caption p {
  color: var(--countdown-text-color);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.15;
  margin: 0 auto;
  max-width: 1000px;
}
.atvi-countdown-active-caption strong {
  color: var(--countdown-accent-color);
  font-weight: 700;
}
/* Timer layout */
.atvi-countdown-active-timer {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.atvi-countdown-time-unit {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.atvi-countdown-time-value,
.atvi-countdown-separator {
  color: var(--countdown-accent-color);
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: clamp(54px, 9vw, 100px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -4px;
  line-height: 0.8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.atvi-countdown-separator {
  flex: 0 0 auto;
}
.atvi-countdown-time-label {
  color: var(--countdown-text-color);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(14px, 1.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-top: 17px;
  text-transform: uppercase;
}
/* Finished / Now Playing state */
.atvi-countdown-inactive-caption h2 {
  color: var(--countdown-text-color);
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: clamp(54px, 8vw, 92px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 0.9;
  margin: 0 0 15px;
  text-transform: uppercase;
}
.atvi-countdown-inactive-caption p {
  color: var(--countdown-text-color);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(18px, 2.5vw, 31px);
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0;
}
.atvi-countdown-inactive-caption strong {
  color: var(--countdown-accent-color);
  font-weight: 700;
}
/* AEM placeholder */
.atvi-countdown-container .cq-placeholder {
  display: none;
}
/* Tablet */
@media screen and (max-width: 1024px) {
  .atvi-countdown-active-caption {
    margin-bottom: 20px;
  }
  .atvi-countdown-time-value,
  .atvi-countdown-separator {
    letter-spacing: -3px;
  }
}
/* Mobile */
@media screen and (max-width: 767px) {
  .atvi-countdown-active-caption {
    margin-bottom: 24px;
  }
  .atvi-countdown-active-caption p {
    max-width: 500px;
  }
  .atvi-countdown-active-timer {
    align-items: flex-start;
  }
  .atvi-countdown-time-value,
  .atvi-countdown-separator {
    font-size: clamp(34px, 12vw, 60px);
    letter-spacing: -2px;
  }
  .atvi-countdown-time-label {
    font-size: clamp(10px, 3vw, 14px);
    letter-spacing: 0;
    margin-top: 12px;
  }
  .atvi-countdown-inactive-caption h2 {
    letter-spacing: -2px;
  }
}
/* Very small screens */
@media screen and (max-width: 420px) {
  .atvi-countdown-time-value,
  .atvi-countdown-separator {
    font-size: clamp(30px, 11vw, 46px);
    letter-spacing: -1px;
  }
  .atvi-countdown-time-label {
    font-size: 9px;
  }
}
/* Reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
  .atvi-countdown-active-container,
  .atvi-countdown-inactive-container {
    transition: opacity 250ms ease,
            visibility 250ms ease;
  }
}