:root {
  --jk-interior-hero-height: clamp(430px, 37.5vw, 720px);
}

:is(.jk-about-hero, .jk-solutions-hero, .jk-solutions-hero-content, .jk-projects-archive-hero, .jk-technical-intro, .jk-blog-intro, .jk-project-case-hero) {
  height: var(--jk-interior-hero-height);
  min-height: var(--jk-interior-hero-height);
}

:is(.jk-about-hero-image, .jk-solutions-hero > img, .jk-projects-archive-hero > img, .jk-technical-intro-image, .jk-blog-intro-image, .jk-project-case-hero-image) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.home .project-hero-slide picture { position: absolute; inset: 0; display: block; }

.jk-about-hero-image { object-position: center bottom; }
.jk-solutions-hero > img { object-position: center 48%; }
.jk-projects-archive-hero > img { object-position: center 50%; }
.jk-technical-intro-image { object-position: center 48%; }
.jk-blog-intro-image { object-position: center 50%; }
.jk-project-case-hero-image { object-position: center 50%; }

.jk-about-hero-wash {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 88%, transparent) 0%, color-mix(in srgb, var(--ink) 65%, transparent) 43%, color-mix(in srgb, var(--ink) 8%, transparent) 72%);
}

.jk-about-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.jk-about-hero :is(h1, .jk-about-hero-lead) { max-width: 650px; }
.jk-about-hero-caption { display: none; }

@media (max-width: 720px) {
  :root { --jk-interior-hero-height: clamp(560px, 150vw, 600px); }

  .jk-about-hero-image { object-position: 88% bottom; }
  .jk-solutions-hero > img { object-position: 60% center; }
  .jk-projects-archive-hero > img { object-position: 60% center; }
  .jk-technical-intro-image { object-position: 66% center; }
  .jk-blog-intro-image { object-position: 64% center; }
  .jk-project-case-hero-image { object-position: center; }

  .jk-about-hero-wash {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 70%, transparent) 72%, color-mix(in srgb, var(--ink) 38%, transparent) 100%);
  }

  .jk-about-hero-copy { align-items: flex-start; text-align: left; }
}