@import url("./case-pediatric.css?v=2");

.dermatology-case {
  --coral: #b66f77;
  --dusty-rose: #b66f77;
  --soft-peach: #d6a08b;
  --light-salmon: #ce7d70;
}

.dermatology-case ::selection {
  background: var(--soft-peach);
}

.dermatology-case .case-nav .case-nav-action,
.dermatology-case .case-numbered-list li > span,
.dermatology-case .case-question-grid span,
.dermatology-case .case-editorial-list li::before,
.dermatology-case .case-narrative .case-label,
.dermatology-case .case-impact-number > strong {
  color: var(--dusty-rose);
}

.dermatology-case .case-intro-media,
.dermatology-case .case-patient .case-split-media,
.dermatology-case .case-expertise .case-split-media,
.dermatology-case .case-execution .case-split-media {
  min-height: 0;
  aspect-ratio: 5 / 4;
}

.dermatology-case .case-diagnosis-media,
.dermatology-case .case-result-media {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.dermatology-case .case-diagnosis {
  padding-bottom: clamp(140px, 13vw, 200px);
}

.dermatology-case .case-diagnosis-panel {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(620px, 46vw);
  margin: clamp(-140px, -9vw, -100px) 0 0 auto;
  padding: clamp(26px, 3vw, 44px);
}

.dermatology-case .case-diagnosis-panel > p:not(.case-lead) {
  margin-top: 12px;
  font-size: 13px;
}

.dermatology-case .case-numbered-list {
  margin-top: 22px;
}

.dermatology-case .case-numbered-list li {
  padding: 14px 0;
}

.dermatology-case .case-numbered-list p {
  margin-top: 5px;
  line-height: 1.5;
}

.dermatology-case .case-numbered-list p + p {
  margin-top: 5px;
}

.dermatology-case .case-numbered-list p strong {
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

.dermatology-case .case-patient .case-copy,
.dermatology-case .case-expertise-panel,
.dermatology-case .case-execution .case-copy {
  max-width: 660px;
}

.dermatology-case .case-expertise-panel {
  padding-top: clamp(26px, 3vw, 46px);
  padding-bottom: clamp(26px, 3vw, 46px);
}

.dermatology-case .case-expertise-panel .case-editorial-list {
  margin: 24px 0;
}

.dermatology-case .case-expertise-panel .case-editorial-list li {
  padding-top: 9px;
  padding-bottom: 9px;
}

.dermatology-case .case-value-chain div {
  align-items: flex-start;
}

.dermatology-case .case-value-chain strong {
  max-width: 72%;
  text-align: right;
  font-size: 14px;
  line-height: 1.45;
}

.dermatology-case .case-narrative {
  background: #172f35;
}

.dermatology-case .case-impact {
  grid-template-columns: 5fr 7fr;
}

.dermatology-case .case-impact-grid > div:last-child {
  grid-column: 1 / -1;
}

.dermatology-case .case-impact-grid > .case-impact-wide {
  grid-column: 1 / -1;
}

.dermatology-case .case-impact-grid > .case-impact-wide + div {
  border-left: 0;
}

.dermatology-case .case-impact-number > strong {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1;
}

@media (max-width: 900px) {
  .dermatology-case .case-diagnosis-panel {
    width: min(660px, 56vw);
  }
}

@media (max-width: 680px) {
  .dermatology-case .case-intro-media,
  .dermatology-case .case-patient .case-split-media,
  .dermatology-case .case-expertise .case-split-media,
  .dermatology-case .case-execution .case-split-media {
    min-height: 0;
    aspect-ratio: 5 / 4;
  }

  .dermatology-case .case-diagnosis,
  .dermatology-case .case-result {
    padding-bottom: 90px;
  }

  .dermatology-case .case-diagnosis-media,
  .dermatology-case .case-result-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .dermatology-case .case-diagnosis-panel {
    width: auto;
    margin: 0;
    padding: 34px var(--page);
  }

  .dermatology-case .case-title-display {
    font-size: clamp(50px, 14vw, 58px);
  }

  .dermatology-case .case-value-chain strong {
    max-width: 68%;
    font-size: 13px;
  }
}