.fair-band {
  background:
    linear-gradient(90deg, var(--surface-2) 0 58%, transparent),
    url("../images/hero-krystal-samling.png") right 65% / 60% auto no-repeat;
}

@media (max-width: 820px) {
  .fair-band {
    background:
      linear-gradient(90deg, var(--surface-2) 0 75%, transparent),
      url("../images/hero-krystal-samling.png") 70% center / cover no-repeat;
  }
}

@media (max-width: 520px) {
  .fair-band {
    background:
      linear-gradient(90deg, var(--surface-2) 0 92%, transparent),
      url("../images/hero-krystal-samling.png") 65% center / cover no-repeat;
  }

  .site-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
    overflow: visible;
    white-space: normal;
  }

  .site-nav a {
    padding: .25rem 0;
  }
}