header {
  ul {
    li.acordia {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      margin-inline: auto;
      height: auto;
      position: relative;
      opacity: 1;
      transition: .5s;

      a {
        display: inline-block;
        color: #808080;
        width: 100%;
        z-index: 1;
        padding-block: 20px;
        background-color: #fff;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          box-sizing: border-box;
          border: 1px solid #808080;
          background-color: unset;
          width: 94%;
          left: 50%;
          top: 50%;
          height: 50%;
          transform: translate(-50%, -50%);
          height: 85%;
          z-index: -1;
        }

        .arrow {
          position: absolute;
          width: 5%;
          right: 7%;
          top: 52%;
          transform: translateY(-50%);
          transition: .5s;
        }
      }

      &:focus-visible {}

      @media (any-hover: hover) {
        &:hover {
          opacity: .7;

          a {
            .arrow {
              right: 5%;
            }

            &::before {
              width: 94%;
              left: 50%;
              top: 50%;
              height: 50%;
              transform: translate(-50%, -50%);
              height: 85%;
              z-index: -1;
            }
          }
        }
      }
    }
  }

  .g-nav {
    li.acordia {

      a {
        color: #fff;
        background-color: #808080;

        &::before {
          border: 1px solid #fff;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .g-nav {
      li.acordia {
        margin-bottom: 20%;
        width: 80%;

        a {
          color: #808080;
          background-color: #ffffff;

          &::before {
            border: 1px solid #808080;
          }
        }
      }
    }
  }
}