.page-header
  background-color: var(--base)

.page-header__inner
  +position(relative)
  display: flex
  +media-breakpoint-up(lg)
    height: 3.25rem
    align-items: center
    justify-content: space-between
  +media-breakpoint-only(md)
    padding-block: .75rem
    flex-direction: column
  +media-breakpoint-down(sm)
    padding-block: .5rem
    flex-direction: column
    gap: .5rem

.page-header__start
  display: flex
  align-items: center
  flex: 1
  +media-breakpoint-up(lg)
    max-width: calc(100% - 21rem)

.page-header__title
  color: var(--main)
  line-height: 1.4
  font-weight: 700
  font-feature-settings: "palt"
  letter-spacing: .02em
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  +media-breakpoint-up(lg)
    font-size: 1.25rem
  +media-breakpoint-down(md)
    font-size: 1.125rem
    flex: 1
  img
    +size(2.5rem auto)
    margin-right: .5rem
  +media-breakpoint-down(sm)
    +text-block(1rem 1.4)
    color: var(--main)
  .page-header__start &
    align-self: center

.page-header__action
  +media-breakpoint-down(sm)
    display: none
