.hero {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}

.hero-media {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #171814;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 65%);
  pointer-events: none;
}

.hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.soul-image {
  background:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
    url("/assets/architecture-detail.jpg") 42% center / cover;
}

.material-story {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: 100svh;
  background: #d9d7d0;
}

.material-copy {
  padding: 10vw 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.material-copy h2 {
  font-size: clamp(3.8rem, 6.4vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  margin: 9vh 0 5vh;
}

.material-copy > p:last-child {
  max-width: 520px;
  line-height: 1.8;
  color: #606158;
}

.material-story figure {
  margin: 0;
  min-height: 100svh;
  position: relative;
  background: #111;
}

.material-story img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.material-story figcaption {
  position: absolute;
  right: 28px;
  bottom: 25px;
  color: #ddd8ce;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

@media (max-width: 850px) {
  .hero {
    grid-template-rows: 46svh 54svh;
  }

  .material-story {
    grid-template-columns: 1fr;
  }

  .material-copy {
    padding: 100px 24px;
  }

  .material-story figure {
    min-height: 75svh;
  }
}