.category {
  display: grid;
  gap: var(--kvs-space-4);
}

.category h3 {
  margin: 0;
  font-size: var(--kvs-text-title);
  letter-spacing: 0;
}

.menu-grid {
  display: grid;
  gap: var(--kvs-space-4);
}

.menu-card {
  display: grid;
  gap: var(--kvs-space-4);
}

.menu-card__image {
  aspect-ratio: 4 / 3;
  inline-size: 100%;
  overflow: hidden;
  border-radius: var(--kvs-radius-media);
  background: var(--kvs-color-surface-soft);
}

.menu-card__image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.menu-card__body {
  display: grid;
  gap: var(--kvs-space-3);
}

.menu-card__title {
  display: grid;
  gap: var(--kvs-space-1);
}

.menu-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kvs-space-2);
}

.menu-card__title h4 {
  margin: 0;
  font-size: 1.22rem;
  letter-spacing: 0;
}

.menu-card__native {
  color: var(--kvs-color-muted);
  font-size: var(--kvs-text-lead);
}

.note-list {
  display: grid;
  gap: var(--kvs-space-2);
}

.note-item {
  border-block-start: 1px solid var(--kvs-color-border);
  padding-block-start: var(--kvs-space-2);
}

.note-item p {
  margin: 0;
}

.note-item__author {
  color: var(--kvs-color-heading);
  font-weight: 700;
}

.note-item__context {
  color: var(--kvs-color-muted);
  font-size: var(--kvs-text-small);
}

.owner-reply {
  display: grid;
  gap: var(--kvs-space-1);
  margin-block-start: var(--kvs-space-2);
  border-inline-start: 3px solid var(--kvs-color-action-primary);
  padding-inline-start: var(--kvs-space-3);
}

.owner-reply__label {
  color: var(--kvs-color-kicker);
  font-size: var(--kvs-text-small);
  font-weight: 700;
}

@media (min-width: 720px) {
  .menu-card {
    grid-template-columns: minmax(180px, 240px) 1fr;
  }
}