/* Peoria's photo treatment, scoped to Chicago; original skyline preserved. */
.location-page section.chicago-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(105deg,rgba(10,15,28,.94) 0%,rgba(10,15,28,.72) 42%,rgba(0,39,104,.42) 72%,rgba(200,38,42,.30) 100%),
    url('../../assets/chicago-river-hero.webp') center 50%/cover no-repeat;
}
.location-page .chicago-hero::before {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(200,38,42,.55) 1.1px,transparent 1.2px);
  background-size:7px 7px;
  -webkit-mask-image:linear-gradient(115deg,transparent 38%,#000 78%,#000 100%);
  mask-image:linear-gradient(115deg,transparent 38%,#000 78%,#000 100%);
  mix-blend-mode:screen;opacity:.75;
}
.location-page .chicago-hero::after {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(102deg,transparent 0 61%,rgba(200,38,42,.9) 61% 61.5%,transparent 61.5%),
    linear-gradient(102deg,transparent 0 66%,rgba(255,255,255,.22) 66% 66.25%,transparent 66.25%),
    linear-gradient(0deg,#C8262A 0 4px,transparent 4px);
}
.location-page .chicago-hero > .container {position:relative;z-index:1}
.location-page .chicago-hero h1 span {text-shadow:2px 2px 2px rgba(10,15,28,.9)}
@media(max-width:720px) {
  .location-page .chicago-hero h1 {font-size:clamp(28px,8.2vw,56px)}
  .location-page section.chicago-hero {
    background-image:
      linear-gradient(105deg,rgba(10,15,28,.94) 0%,rgba(10,15,28,.72) 42%,rgba(0,39,104,.42) 72%,rgba(200,38,42,.30) 100%),
      url('../../assets/chicago-river-hero-mobile.webp');
  }
}