/* Single source of truth for homepage hero background */
.portfolio-reference-hero {
  /* background-color: #f0f0f0 !important; */
  /*background: linear-gradient(59deg, #18121d 0%, #1e1225 100%) !important; */
  /* background-image: url("../../images/hero/ux-ai-hero-background.png") !important; */
  background: #000 !important;
  /* background-image: url("../../images/hero/site-bg.png") !important; */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

.portfolio-reference-hero::before,
.portfolio-reference-hero::after {
  content: none !important;
  display: none !important;
}

.portfolio-reference-hero .sticky-field {
  display: none !important;
}

@media (max-width: 1180px) and (min-width: 801px) {
  .portfolio-reference-hero {
    background-position: 60% center !important;
  }
}

@media (max-width: 800px) {
  .portfolio-reference-hero {
    background-position: 67% center !important;
    background-size: cover !important;
  }
}

@media (max-width: 600px) {
  .portfolio-reference-hero {
    background-position: 72% center !important;
    background-size: cover !important;
  }
}

/* Subtle checked/grid texture on the black homepage hero only. */
body.homepage-v4 .hero.portfolio-reference-hero {
  background-color: #000 !important;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.065) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  background-position: center center !important;
  background-repeat: repeat !important;
}