.day-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .94) 47%, rgba(255, 255, 255, .56) 100%),
    var(--day-card-art);
  background-repeat: no-repeat;
  background-position: center, right .65rem center;
  background-size: 100% 100%, auto 82%;
}

.day-card > * {
  position: relative;
  z-index: 1;
}

#day-1 { --day-card-art: url("img/day-1-language.svg"); }
#day-2 { --day-card-art: url("img/day-2-data.svg"); }
#day-3 { --day-card-art: url("img/day-3-dom.svg"); }
#day-4 { --day-card-art: url("img/day-4-events.svg"); }
#day-5 { --day-card-art: url("img/day-5-network.svg"); }
#day-6 { --day-card-art: url("img/day-6-architecture.svg"); }

@media print {
  .day-card {
    background-image: none;
  }
}