.prefix-nav__list {
  display: none;

  @media (min-width: 1024px) {
    display: flex;
  }


  align-items: stretch;
  font-family: var(--font-laila), serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 140%;
  text-align: center;
  overflow: hidden;
  border-radius: 40px 0;

  .prefix-nav__item {
    flex: 1;
    --background: var(--action-secondary);
    --foreground: var(--action-foreground);

    &.prefix-nav__item--active-trail {
      --background: var(--action-secondary-hover);
      --foreground: var(--action-foreground-hover);
    }

    & > * {
      display: block;
      padding: 28px;
      width: 100%;
      height: 100%;

      background: var(--background);
      color: var(--foreground);

      &:hover {
        --background: var(--action-secondary-hover);
        --foreground: var(--action-foreground-hover);
      }
    }
  }
}