.announcement-bar__timer {
  display: flex;
  gap: 24px;
  align-items: center;

  @media screen and (max-width: 990px) {
    justify-content: space-between;
    width: 100%;
  }

  .timer {
    display: flex;
    align-items: center;
    gap: 4px;

    @media screen and (max-width: 990px) {
      gap: 3px;
    }

    .timer__hrs,
    .timer__mins,
    .timer__secs,
    .timer__days {
      display: flex;
      padding: 7px 5px;
      border-radius: 6px;
      background: #fff;

      @media screen and (max-width: 990px) {
        padding: 6px 4px;
      }

      p {
        font-weight: 500;
        font-size: 14px;
        letter-spacing: -0.02em;
        text-align: center;
        color: #093837;
        line-height: 1;

        @media screen and (max-width: 990px) {
          font-size: 13px;
        }
      }
    }
  }

  .announcement-bar__timer-countdown {
    display: flex;
    gap: 6px;
    align-items: center;

    .timer-text {
      font-weight: 400;
      font-size: 14px;
      letter-spacing: -0.01em;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1;

      @media screen and (max-width: 990px) {
        display: none;
      }
    }
  }

  .announcement-bar__timer-logo {
    img {
      max-width: unset;
      max-height: 24px;
    }
  }

  .announcement-bar__timer-logo-mobile {
    display: none;

    @media screen and (max-width: 990px) {
      display: block;

      img {
        max-width: unset;
        max-height: 28px;
      }
    }
  }
}

.announcement-bar__timer-header {
  display: flex;
  align-items: center;
  gap: 6px;

  @media screen and (max-width: 990px) {
    gap: 8px;
  }
}

.announcement-bar__text-block {
  display: flex;
  align-items: center;
  gap: 24px;

  @media screen and (max-width: 990px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.announcement-bar__timer-title {
  /* font-style: italic; */
  /* font-weight: 700; */
  font-size: var(--title-fz-desktop);
  text-transform: uppercase;
  text-align: center;
  color: #00ffd0;
  line-height: var(--title-lh-desktop);

  @media screen and (max-width: 990px) {
    font-size: var(--title-fz-mobile);
    line-height: var(--title-lh-mobile);
  }
}

.announcement-bar__timer-subtitle {
  white-space: nowrap;
  font-family: Playfair Display;
  /* font-style: italic; */
  font-weight: 500;
  font-size: var(--subtitle-fz-desktop);
  letter-spacing: 0.01em;
  text-align: center;
  color: #00ffd0;
  line-height: var(--subtitle-lh-desktop);

  @media screen and (max-width: 990px) {
    display: none;
  }
}

.announcement-bar__timer-subtitle-mobile {
  display: none;

  @media screen and (max-width: 990px) {
    /* font-style: italic; */
    font-family: Playfair Display;
    font-weight: 500;
    font-size: var(--subtitle-fz-mobile);
    letter-spacing: 0.01em;
    text-align: center;
    color: #00ffd0;
    display: block;
    line-height: var(--subtitle-lh-mobile);
    text-align: left;
  }
}

.announcement-bar__wrapper:has(.announcement-bar__timer) {
  max-width: unset;
}