.app-header {
  align-items: center;
  background: var(--header-gradient);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  height: var(--header-height);
  padding: 0 20px;
  width: 100%;
}

.app-header__slot {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.app-header__back {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  padding: 0;
  transition: background-color 150ms ease;
  width: 48px;
}

.app-header__back:hover {
  background-color: rgb(255 255 255 / 10%);
}

.app-header__back:focus-visible {
  outline: 3px solid var(--color-white);
}

.app-header__logo {
  display: block;
  justify-self: center;
  max-width: 100%;
  width: min(247px, calc(100vw - 136px));
}