.footer-member {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1000;
  /*max-width: 1300px;*/

  &::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: -24px;
    width: 36px;
    height: 100%;
    background: transparent;
    border-bottom-right-radius: 36px;
    box-shadow: 0 36px 0 0 #211f23;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: -24px;
    width: 36px;
    height: 100%;
    background: transparent;
    border-bottom-left-radius: 36px;
    box-shadow: 0 36px 0 0 #211f23;
  }
}

.footer-member__nav {
  background-color: #211f23;
  padding: 0 30px;
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;

  @media screen and (max-width: 767px) {
    padding: 0 15px;
  }
}

.footer-member__menu {
  display: grid;
  grid-template-columns: repeat(var(--count-menu-items), 1fr);
  list-style: none;
  margin: 0;
  padding: 0;

  .menu-item {
    position: relative;
    height: 80px;

    @media screen and (max-width: 767px) {
      display: flex;
      align-items: center;
    }

    .menu-item__link {
      --icon-offset: 25px;
      --icon-size: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      transform: translateY(calc(-1 * var(--icon-offset)));
      width: 100%;
      text-decoration: none;

      @media screen and (max-width: 1200px) {
        --icon-size: 60px;
      }

      @media screen and (max-width: 767px) {
        --icon-offset: 0px;
        --icon-size: 50px;
      }

      &:hover {
        transition: top 0.3s;

        .menu-item__icon-wrapper {
          transform: translateY(-10px);
          background-color: var(--red);
          box-shadow: 0 0 0 4px var(--light-red);
          transition:
            transform 0.3s,
            background-color 0.3s;

          @media screen and (max-width: 767px) {
            transform: translateY(0);
          }
        }
      }

      .menu-item__label {
        text-align: center;
        font-size: 13px;
        line-height: 20px;
        color: #ffffff;
        text-transform: uppercase;

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

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

    &.current-menu-item {
      .menu-item__icon-wrapper {
        transform: translateY(-10px);
        background-color: var(--red);
        box-shadow: 0 0 0 4px var(--light-red);

        @media screen and (max-width: 767px) {
          transform: translateY(0);
        }
      }
    }

    .menu-item__icon-wrapper {
      width: var(--icon-size);
      height: var(--icon-size);
      background-color: #211f23;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition:
        transform 0.3s,
        background-color 0.3s;
    }
  }
}