ホバー時に文字色を変え、下線を出したい

AaからFfの６つのリストにタイトルのようなホバーアクションを効かせたいのですが、今私のCSSではAとaのそれぞれにホバーアクションが当たってしまっております。Aとaまとめてホバーアクションを起こさせたいのですがどの様にしたら良いのでしょうか。（マウスをホバーさせるとAとaの両方が同時にボバーアクションを起こす状態）

自分なりに　.wrappaer:hover{ color: #9e9063; } 等試してみたんですが、親と子の要素の兼ね合いか、うまく出来ませんでした。AaからFfをgritでデザインしてたりするので、どの様に書いたら良いか分からなくなってしまいました。

html
   <header>
     <div class="wrap">
     <div class="container-lg d-flex">
       <div class="header-logo">
         <img src="..." alt="ロゴ" />
       </div>
       <div class="header-block">
         <div class="wrapper">
           <a href=""><div class="header-list listA">A</div>
           <div class="header-item listG">a</div></a>
         </div>
         <div class="wrapper">
           <a href=""><div class="header-list listB">B</div>
           <div class="header-item listH">b</div></a>
         </div>
         <div class="wrapper">
           <a href=""><div class="header-list listC">C</div>
           <div class="header-item listI">c</div></a>
         </div>
         <div class="wrapper">
           <a href=""><div class="header-list listD">D</div>
           <div class="header-item listJ">d</div></a>
         </div>
         <div class="wrapper">
           <a href=""><div class="header-list listE">E</div>
           <div class="header-item listK">e</div></a>
         </div>
         <div class="wrapper">
           <a href=""><div class="header-list listF">F</div>
           <div class="header-item listL">f</div></a>
         </div>
        </div>
       <div class="header-icon">
         <ul>
           <li>
             <a class="navbar-brand" href=""> <img src="" alt="" width="29" height="29"></a>
           </li>
           <li>
             <a class="navbar-brand" href=""> <img src="" alt="" width="29" height="29"></a>
           </li>
           <li class="lang">Z</li>
         </ul>
        </div>
      </div>
    </div>
    </header>

css
.wrap{
  max-width: 1146px;
  margin: auto;
}
.container-jg {
  width: 100%;
  margin: 0 auto;
}
/*  header  */
header {
  width: 100%;
  background-color: #000000;
  height: 80px;
}
.d-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.header-logo img {
  padding-top: 27.3px;
  padding-bottom: 27.3px;
  padding-right: 100px;
}
.header-block {
  display: grid;
  grid-template-rows: 18px 11px;
  grid-template-columns: 97px 122px 90px 116px 78px 118px;
}
.wrapper{
  height: 41px;
}

.wrapper a:link{
  text-decoration: none;
}
.wrapper a:visited{
  text-decoration: none;
}
.wrapper a:active{
  text-decoration: none;
}
.wrapper a:hover{
  text-decoration: underline;
  color: #9e9063;
}
.header-list:hover{
  color: #9e9063;
}
.header-item:hover{
  color: #9e9063;
}

.listA{
  grid-row: 1/2;
  grid-column: 1/2;
}
.listB{
  grid-row: 1/2;
  grid-column: 2/3;
}
.listC{
  grid-row: 1/2;
  grid-column: 3/4;
}
.listD{
  grid-row: 1/2;
  grid-column: 4/5;
}
.listE{
  grid-row: 1/2;
  grid-column: 5/6;
}
.listF{
  grid-row: 1/2;
  grid-column: 6/7;
}
.listG{
  grid-row: 2/3;
  grid-column:1/2;
}
.listH{
  grid-row: 2/3;
  grid-column: 2/3;
}
.listI{
  grid-row: 2/3;
  grid-column: 3/4;
}
.listJ{
  grid-row: 2/3;
  grid-column: 4/5;
}
.listK{
  grid-row: 2/3;
  grid-column: 5/6;
}
.listL{
  grid-row: 2/3;
  grid-column: 6/7;
}
.header-list {
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 25px;
  text-align: left;
  color: #fff;
  list-style: none;
}

.header-item{
  font-family: YuMincho;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 14px;
  text-align: left;
  color: #fff;
}