body.bg-light {
  --bg-gradient: #ffffff; /* Light mode fade into white */
}

body.bg-dark {
  --bg-gradient: #121212; /* Dark mode fade into dark background */
}

body.bg-dark .header-image {
  filter: brightness(1); /* Darken image in dark mode */
}


.header-image {
  position: relative;
  height: 300px;
  background-image: url('../img/background-elden.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}

/* Overlay and gradient */
.header-image .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 70%,
    var(--bg-gradient) 100%);
}

.header-image .app-title-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-left: 2rem;
  padding-right: 2rem;
  color: #fff;
}

body.bg-dark .header-image .overlay {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    var(--bg-gradient) 100%);
}

body.bg-light .header-image .app-title-wrapper {
  color: #222;
}

@media (max-width: 576px) {
  .header-image {
    height: 150px; /* smaller height on small screens */
  }

  .header-image .app-title-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}