.gra-navbar {
  display: flex;
  height: 5.6rem;
  min-height: 5.6rem;
  border-bottom: 1px solid $color-border;
  @include moder($modes) {
    background-color: mode("colorCardBg");
    border-color: mode("colorBorder");
  }
  @include min-width($breakpoint-xs) {
    height: 7rem;
    max-height: 7rem;
  }

  > .gra-container {
    display: flex;
    align-items: center;
  }

  &-logo {
    display: flex;
    max-width: 9.2rem;
    flex-shrink: 0;
    align-items: stretch;
    margin-left: -$space-m;
    padding-inline: $space-m;
    @include min-width($breakpoint-xs) {
      max-width: 12rem;
    }
  }

  &-logo-link {
    display: flex;
    align-items: center;
  }

  &-content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
  }
}