.dot {
  --size: 0.3em;
}
.dot:after {
  content: "";
  background-color: currentColor;
  width: var(--size);
  margin-left: var(--size);
  aspect-ratio: 1;
  display: inline-block;
  border-radius: 5000%;
  vertical-align: middle;
}

.dot.veg:after {
  background-color: hsl(80, 40%, 40%);
}

.dot.meat:after {
  background-color: hsl(0, 40%, 40%);
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-top: 1rem;
  --line-color: currentColor;
  --line-height: 71%;
  --line-width: 0.5px;
  --line-width: min(max(0.5px, 0.1vw), 1px);
  /* --line-color: color-mix(in srgb, currentColor, rgb(255,255,255) 70%); */
  /* --line-color: #736359; */
  background: linear-gradient(var(--line-color), var(--line-color)) center/var(--line-width) var(--line-height) no-repeat;
}

.menu-grid--col {
  text-align: center;
}

.menu-grid--sep {
  font-family: "Playfair Display";
  font-size: 0.8rem;
  line-height: 0.2rem;
  user-select: none;
}

.menu-flex {
  display: flex;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-top: 1rem;
}

.menu-flex--box {
  text-align: center;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1rem auto;
  font-size: 0.8em;
  max-width: 70.7%;
  user-select: none;
  font-family: "Playfair Display";
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid;
  --margin: .5em;
}

.separator:not(:empty)::before {
  margin-right: var(--margin);
}

.separator:not(:empty)::after {
  margin-left: var(--margin);
}