/* V-CORE composition spacing and integrated screen v8. */
.skin-depth-copy {
  max-width: 300px;
  padding-right: 18px;
  align-self: center;
}

.skin-depth-copy h2 {
  max-width: 285px;
  font-size: clamp(28px,2.65vw,46px);
  line-height: 1.06;
  letter-spacing: .025em;
}

.skin-depth-copy > p:not(.kicker) {
  max-width: 285px;
}

.research-note {
  max-width: 290px;
}

.skin-lab-v4,
.vcore-clean-visual {
  overflow: visible;
}

.vcore-layer-rail span {
  left: -6%;
}

.vcore-layer-rail span::after {
  left: 91%;
  width: 164px;
}

.vcore-layer-rail span::before {
  left: calc(91% + 160px);
}

.vcore-panel-screen {
  top: 14%;
  width: 58px;
  height: 102px;
  border: 0;
  border-radius: 3px;
  background: #020204;
  box-shadow: none;
}

.skin-depth.is-active .vcore-panel-screen {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.vcore-panel-screen > span { font-size: 7.5px; }
.vcore-panel-screen > small { font-size: 3.75px; }
.vcore-panel-screen > div {
  height: 15px;
  margin: 8px 0 7px;
}
.vcore-panel-screen > b { font-size: 8px; }

@media (max-width: 1050px) {
  .skin-depth-copy {
    max-width: 320px;
    padding-right: 8px;
  }
  .vcore-layer-rail span { left: -3%; }
  .vcore-layer-rail span::after { width: 125px; }
  .vcore-layer-rail span::before { left: calc(91% + 121px); }
}

@media (max-width: 600px) {
  .skin-depth-copy {
    max-width: none;
    padding: 0 12px;
  }
  .skin-depth-copy h2,
  .skin-depth-copy > p:not(.kicker),
  .research-note {
    max-width: 100%;
  }
  .skin-lab-v4,
  .vcore-clean-visual {
    overflow: hidden;
  }
  .vcore-layer-rail span { left: 1.5%; }
  .vcore-layer-rail span::after { width: 34px; }
  .vcore-layer-rail span::before { left: calc(89% + 30px); }
  .vcore-panel-screen {
    top: 14.5%;
    width: 46px;
    height: 78px;
  }
  .vcore-panel-screen > span { font-size: 6px; }
  .vcore-panel-screen > b { font-size: 6.5px; }
}