mixin menu(classes)
  nav.navigation
    ul.menu(class=classes)
      each title in ["Full menu", "Place an order", "Our story", "Contact us"]
        li.menu-item
          a.menu-link(href="#0", data-text=title)= title

section.section
  h2.section-title Menu items grow on hover and shift layout.
  +menu
section.section
  h2.section-title Add a pseudo element to account for the bold font width. No more layout shift!
  +menu("fix")

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;700&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}

.section {
  width: 100%;
}

.section-title {
  margin-bottom: 2rem;
  line-height: 1.2;
  color: white;
  background-color: mediumslateblue;
  padding: 1rem;
}

.menu {
  --bold: 700;

  display: flex;
  flex-wrap: wrap;
  font-size: 1.25rem;
}

.menu-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  color: black;
  text-decoration: none;

  &:hover {
    font-weight: var(--bold);
  }
}

.menu.fix .menu-link::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: var(--bold);

  @media speech {
    display: none;
  }
}