/* Shared photo treatment for the four distinct calendar mastheads. */
.calendar-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--surface, #111);
}

.calendar-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.calendar-hero--science::before {
  background-image:
    linear-gradient(90deg, rgba(3, 11, 7, .44), rgba(3, 11, 7, .76) 46%, rgba(3, 11, 7, .55)),
    url("../images/calendar-headers/science-nebula.webp");
}

.calendar-hero--space::before {
  background-image:
    linear-gradient(90deg, rgba(3, 9, 17, .45), rgba(3, 9, 17, .74) 46%, rgba(3, 9, 17, .5)),
    url("../images/calendar-headers/space-galaxy.webp");
}

.calendar-hero--celebrations::before {
  background-image:
    linear-gradient(90deg, rgba(12, 9, 5, .55), rgba(12, 9, 5, .8) 46%, rgba(12, 9, 5, .54)),
    url("../images/calendar-gallery/celebrations-5.webp");
}

.calendar-hero--markets::before {
  background-image:
    linear-gradient(90deg, rgba(5, 10, 8, .52), rgba(5, 10, 8, .8) 46%, rgba(5, 10, 8, .52)),
    url("../images/calendar-gallery/markets-1.webp");
}

.calendar-hero-credit {
  position: absolute;
  z-index: 1;
  left: 14px;
  bottom: 5px;
  font: 9px 'Space Mono', monospace;
  color: rgba(255, 255, 255, .75);
  letter-spacing: .5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.calendar-hero-credit:hover,
.calendar-hero-credit:focus-visible {
  color: #fff;
}

@media (max-width: 640px) {
  .calendar-hero-credit {
    left: 8px;
    bottom: 3px;
    font-size: 8px;
  }
}