.shell:has(#portal-dashboard.active) {
  position: relative;
  isolation: isolate;
}

.shell:has(#portal-dashboard.active)::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 320px;
  content: "";
  background:
    linear-gradient(180deg, rgba(246, 248, 245, .58) 0%, rgba(246, 248, 245, .7) 62%, #f6f8f5 100%),
    url("assets/dashboard-trekker-kraan.jpg") center 70% / cover no-repeat;
}

.shell:has(#portal-dashboard.active) > .topbar {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(29, 92, 68, .16);
}

@media (max-width: 600px) {
  .shell:has(#portal-dashboard.active)::before {
    height: 390px;
    background-position: center 68%;
  }
}