body.course-background-page {
  min-height: 100vh;
  background: #f7f5ee;
  isolation: isolate;
}

body.course-background-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(247, 245, 238, .48), rgba(247, 245, 238, .58)),
    var(--course-page-image);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.course-background-page .app-header,
body.course-background-page .app-main {
  position: relative;
  z-index: 1;
}

body.course-background-page .app-header {
  border-bottom: 1px solid rgba(220, 228, 223, .7);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(8px);
}

@media (max-width: 700px) {
  body.course-background-page::before { background-position: center center; }
}