.project-stage {
  grid-template-columns: minmax(0, 1.55fr) minmax(390px, .85fr);
  min-height: 620px;
  background: #fff;
  isolation: isolate;
}

.project-visual {
  min-height: 620px;
  background: #dfe8ef;
}

.project-visual > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.project-copy {
  position: relative;
  z-index: 2;
  margin-left: -86px;
  padding: 48px 46px 44px 130px;
  background: #fff;
  clip-path: polygon(76px 0, 100% 0, 100% 100%, 0 100%);
}

.project-caption {
  left: 24px;
  right: 105px;
  bottom: 24px;
  width: auto;
  max-width: 460px;
}

@media (max-width: 1050px) {
  .project-stage { grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr); }
  .project-copy { margin-left: -58px; padding-left: 94px; clip-path: polygon(50px 0,100% 0,100% 100%,0 100%); }
}

@media (max-width: 820px) {
  .project-stage { display: block; min-height: 0; }
  .project-visual { min-height: 440px; }
  .project-copy {
    margin: -38px 0 0;
    padding: 70px 24px 34px;
    clip-path: polygon(0 38px,100% 0,100% 100%,0 100%);
  }
  .project-caption { left: 16px; right: 16px; bottom: 52px; }
}

@media (max-width: 520px) {
  .project-visual { min-height: 360px; }
}
