.announcement {
  display: block;

  .announcement__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    position: relative;

    @media screen and (min-width: 1000px) {
      height: 35px;
    }

    li {
      padding: 0;
      list-style: none;
    }

    .announcement__item,
    .announcement__item a {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      span {
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        color: #fff;
      }
    }

    .announcement__link-item {
      height: 100%;
      display: none;

      @media screen and (min-width: 1000px) {
        display: flex;
      }
    }

    .announcement__link-item a {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background-color: var(--brand-color);
      padding: 0 24px;

      span {
        font-weight: 700;
        font-size: 14px;
        line-height: 140%;
        color: #fff;
      }
    }

    @media screen and (max-width: 1000px) {
      .announcement__item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;

        &.announcement__item--active {
          opacity: 1;
          visibility: visible;
        }

        &.announcement__item--hidden {
          opacity: 0;
          visibility: hidden;
        }
      }

      .announcement__items {
        position: relative;
        justify-content: center;
      }
    }
  }
}