:root{
  --v2-bronze:#a35f30;
  --v2-paper:#f0ece4;
  --v2-ink:#2a2925;
  --v2-sans:Inter,Arial,Helvetica,sans-serif;
}

.first-slide-test .staircase-frame{display:none}

.project-intro.first-slide-test{
  align-items:center;
  padding-block:clamp(24px,3.5vh,40px);
}

.first-slide-copy{position:relative;z-index:1}

.staircase-composition,
.elevation-composition{
  min-width:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
}

.staircase-outline,
.elevation-outline{
  min-height:0;
  overflow:hidden;
  border:1px solid var(--v2-bronze);
  background:var(--v2-paper);
}

.staircase-outline img,
.elevation-outline img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.staircase-composition figcaption,
.elevation-composition figcaption{
  margin:12px 0 0;
  padding:0;
  border:0;
  color:var(--v2-bronze);
  background:transparent;
  font:500 9.5px/1.4 var(--v2-sans);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.first-slide-variant-a{
  grid-template-columns:minmax(0,58fr) minmax(420px,42fr);
}

.first-slide-variant-a .staircase-composition{
  justify-self:center;
  width:min(552px,100%);
  height:100%;
}

.first-slide-variant-a .staircase-outline{
  width:100%;
  aspect-ratio:1550/2500;
}

.first-slide-variant-b{
  grid-template-columns:minmax(620px,720px) minmax(0,1fr);
  gap:clamp(34px,3vw,58px);
}

.first-slide-variant-b .first-slide-copy{
  max-width:720px;
  padding-left:0;
}

.variant-b-visuals{
  min-width:0;
  height:100%;
  display:grid;
  grid-template-columns:530px minmax(280px,360px);
  justify-content:space-between;
  align-items:center;
  gap:clamp(18px,1.55vw,30px);
}

.first-slide-variant-b .staircase-composition{
  width:100%;
  max-width:530px;
  justify-self:end;
}

.first-slide-variant-b .staircase-outline{
  width:100%;
  aspect-ratio:1550/2500;
}

.first-slide-variant-b .elevation-composition{
  width:100%;
  max-width:360px;
  justify-self:start;
}

.first-slide-variant-b .elevation-outline{
  width:100%;
  aspect-ratio:1715/2348;
}

@media(max-width:1550px){
  .project-intro.first-slide-test{padding-block:24px}
  .first-slide-variant-a{grid-template-columns:minmax(0,59fr) minmax(390px,41fr)}
  .first-slide-variant-a .staircase-composition{width:min(450px,100%)}
  .first-slide-variant-b{grid-template-columns:minmax(520px,565px) minmax(0,1fr);gap:34px}
  .variant-b-visuals{grid-template-columns:435px minmax(230px,286px);gap:20px}
  .first-slide-variant-b .staircase-composition{max-width:435px}
  .first-slide-variant-b .elevation-composition{max-width:286px}
  .staircase-composition figcaption,.elevation-composition figcaption{margin-top:9px;font-size:8.7px}
}

@media(max-width:1400px){
  .project-intro.first-slide-test{padding-block:20px}
  .first-slide-variant-a{grid-template-columns:minmax(0,61fr) minmax(360px,39fr)}
  .first-slide-variant-a .staircase-composition{width:min(385px,100%)}
  .first-slide-variant-b{grid-template-columns:minmax(500px,535px) minmax(0,1fr);gap:26px}
  .variant-b-visuals{grid-template-columns:385px minmax(214px,248px);gap:16px}
  .first-slide-variant-b .staircase-composition{max-width:385px}
  .first-slide-variant-b .elevation-composition{max-width:248px}
  .staircase-composition figcaption,.elevation-composition figcaption{margin-top:7px;font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .staircase-composition,.elevation-composition{scroll-behavior:auto}
}