.header-nav__menu-sublist {
  position: absolute;
  inset-block-start: 0;
  min-width: 200px;
  width: max-content;
  min-height: 100px;
  padding-block-start: 0;
  margin-inline-start: -20px;
  opacity: 0;
  overflow: hidden;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.header-nav__menu-panel {
  background-color: rgb(var(--color-background));
  padding-inline: 20px;
  padding-block: 10px;
}

.header-nav__menu-panel > ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.header-nav__menu-panel > ul a {
  font-size: 1.1rem;
  display: inline-block;
  width: max-content;
  color: rgb(var(--color-text));
}
.header-nav__menu-panel > ul a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: #3a3a3a;
  transition: width .3s;
  opacity: .7;
}
.header-nav__menu-panel > ul a:hover::after {
  width: 100%;
}