.highlight-menu-content {
  display: flex;
  padding: var(--Highlight-List-Menu-Vertical-Padding, 0.75rem) var(--Highlight-List-Menu-Horizontal-Padding, 0.75rem);
  justify-content: space-between;
  align-items: center;
  border-radius: var(--Highlight-List-Menu-Radius, 0.5rem);
  background: var(--Highlight-List-Menu-Background, #DFE2E5);
  max-width: 13.75rem;
  text-decoration: none !important;

  & .highlight-menu-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Highlight-List-Menu-Gap, 0.25rem);
    flex: 1 0 0;

    & .highlight-menu-title {
      align-self: stretch;
      color: var(--Highlight-List-Menu-Text, #001C35);
      font: var(--Single-Line-Body-Small-Link);
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: auto;
      text-decoration-thickness: auto;
      text-underline-offset: auto;
      text-underline-position: from-font;
    }

    & .highlight-menu-text {
      align-self: stretch;
      color: var(--Highlight-List-Menu-Text, #001C35);
      font: var(--Body-Small);
    }
  }
}

.highlight-menu-content:hover {
  & .highlight-menu-link {
    & .highlight-menu-title {
      /* TODO understand with DS which variable to use */
      color: var(--Item-Menu-Hover-Text, #005299);
    }
  }
}

@media (width < 1200px) {
  .highlight-menu-content {
    max-width: 100%;
  }
}