.event-countdown {
  display: flex;
  justify-content: center;
  height: 44px;
}

.event-countdown__main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: .75rem;
  padding-right: .75rem;
  width: 1366px;
  position: relative;
}

.event-countdown__main .event-logo {
  width: 40px;
  height: 40px;
  -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 5, 61, 0.54));
          filter: drop-shadow(0px 0px 4px rgba(0, 5, 61, 0.54));
}

.event-countdown__main > * + * {
  margin-left: 1rem;
}

@media screen and (max-width: 768px) {
  .event-countdown__main > * + * {
    margin-left: .5rem;
  }
}

.event-countdown__title {
  line-height: 1.15;
  color: white;
}

.countdown {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: .25rem;
  padding-right: .25rem;
  height: 36px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.4) 37%, transparent calc(37% + 1px), transparent 100%);
  border-radius: .25rem;
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: white;
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  box-shadow: 0 4px 4px rgba(6, 13, 35, 0.25);
}

[class*="countdown__col"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  position: relative;
}

[class*="countdown__col"] + [class*="countdown__col"] {
  margin-left: .5rem;
}

.countdown__col-hrs::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.75rem;
  background-color: rgba(255, 255, 255, 0.32);
  position: absolute;
  left: calc( -.25rem - 1px);
  top: 0;
}

.countdown__col-hrs ~ [class*="countdown__col"]::before {
  content: ":";
  display: block;
  position: absolute;
  left: calc( -.25rem - 1px);
  top: 0;
}

.countdown__time {
  display: block;
  line-height: 1;
  font-size: 1.375rem;
}

.countdown__text {
  display: block;
  line-height: 1;
  font-size: .5rem;
}

@media screen and (max-width: 768px) {
  .event-countdown__main {
    justify-content: normal;
  }
  .event-countdown__main .countdown {
    margin-left: auto;
  }
  .event-countdown__title {
    padding-right: .5rem;
  }
}

@font-face {
  font-family: Aileron-Bold;
  src: url("../../../_global/common/images/event-countdown/2026/world-cup/Aileron-Bold.otf?v=20260420001");
}

@font-face {
  font-family: Aileron-Black;
  src: url("../../../_global/common/images/event-countdown/2026/world-cup/Aileron-Black.otf?v=20260420001");
}

.event-countdown {
  --event-countdown-img-layer2: url("../../../_global/common/images/event-countdown/2026/world-cup/event-countdown-bg.png?v=20260420001");
  --event-countdown-img-layer1: linear-gradient(to right, #6f0101 0%, #6f0101 50%, #014601 51%, #014601 100%);
  background-image: var(--event-countdown-img-layer2), var(--event-countdown-img-layer1);
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .event-countdown__main::before {
    content: "";
    display: block;
    background-image: linear-gradient(to right, black 0%, gray 15%, gray 85%, black 100%);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    mix-blend-mode: overlay;
  }
}

.event-countdown__title {
  font-family: 'Aileron-Black', sans-serif;
  font-size: 26px;
  text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.54);
}

@media screen and (max-width: 768px) {
  .event-countdown__title {
    font-size: .875rem;
  }
}

.countdown__time {
  font-family: 'Aileron-Bold', sans-serif;
}