I have a POC that will cause a layout shift only when a certain word is hovered, but I can't figure out why / what exactly is causing the shift.

If I hover the Three text, the layout will shift; while hovering any of the other elements won't cause a shift.

I know it has something to do with the display: flex of the div, but I can't figure out why is it causing the shift.

div {
  display: flex;
}

nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font: 120% system-ui;
  text-align: center;
  padding: 2rem 1rem;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  font-weight: 900;
}

Why is it happening and how can I avoid it, without removing the display: flex from the div?