.sleep-subtitle {
  max-width: calc(740 / 1728 * 100vw);
  margin: calc(20 / 1728 * 100vw) 0 0;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: calc(28 / 1728 * 100vw);
  line-height: 120%;
}


.sleep-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: calc(50 / 1728 * 100vw);
  overflow: hidden;
  background: #ececec;
}

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

.sleep-hero-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(28 / 1728 * 100vw);
  margin-top: calc(28 / 1728 * 100vw);
}

.sleep-hero-details .media-placeholder {
  aspect-ratio: 16 / 7;
}

.sleep-facts {
  grid-template-columns: 1.6fr 1fr 1fr;
}

.sleep-eyebrow {
  margin-bottom: calc(18 / 1728 * 100vw) !important;
  font-family: 'Arial Narrow', Arial, sans-serif !important;
  font-size: calc(15 / 1728 * 100vw) !important;
  color: #8a8a8a;
}

.sleep-poster-analysis,
.sleep-visual-flow,
.sleep-lettering-sequence,
.sleep-alphabet,
.sleep-word-tests,
.sleep-lettering-labels,
.sleep-book-cover,
.sleep-book-spreads,
.sleep-outcome,
.sleep-fields {
  grid-column: 2;
}

.sleep-poster-analysis {
  display: grid;
  grid-template-columns: calc(360 / 1728 * 100vw) 1fr;
  gap: calc(28 / 1728 * 100vw);
  margin-top: calc(75 / 1728 * 100vw);
}

.sleep-poster-full {
  aspect-ratio: 3 / 4;
}

.sleep-analysis-stack {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: calc(28 / 1728 * 100vw);
}

.sleep-analysis-stack figure,
.sleep-lettering-sequence figure,
.sleep-word-tests figure,
.sleep-book-spreads figure {
  margin: 0;
}

.sleep-analysis-stack .media-placeholder {
  aspect-ratio: 16 / 7;
}

.sleep-analysis-stack figcaption,
.sleep-lettering-sequence figcaption,
.sleep-word-tests figcaption,
.sleep-book-spreads figcaption {
  margin-top: calc(9 / 1728 * 100vw);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: calc(13 / 1728 * 100vw);
  color: #777;
}

.sleep-visual-flow {
  width: 100%;
  aspect-ratio: 16 / 5;
  margin-top: calc(70 / 1728 * 100vw);
}

.sleep-lettering-sequence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(22 / 1728 * 100vw);
  margin-top: calc(75 / 1728 * 100vw);
}

.sleep-lettering-sequence .media-placeholder {
  aspect-ratio: 4 / 3;
}

.sleep-alphabet {
  width: 100%;
  aspect-ratio: 16 / 7;
  margin-top: calc(70 / 1728 * 100vw);
}

.sleep-word-tests {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(28 / 1728 * 100vw);
  margin-top: calc(28 / 1728 * 100vw);
}

.sleep-word-tests .media-placeholder {
  aspect-ratio: 16 / 7;
}

.sleep-lettering-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(65 / 1728 * 100vw) 0 0;
  border-top: 0.3px solid #000;
  border-bottom: 0.3px solid #000;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.sleep-lettering-labels div {
  padding: calc(22 / 1728 * 100vw);
}

.sleep-lettering-labels div:not(:last-child) {
  border-right: 0.3px solid #cfcfcf;
}

.sleep-lettering-labels dt {
  margin-bottom: calc(10 / 1728 * 100vw);
  font-size: calc(13 / 1728 * 100vw);
  color: #8a8a8a;
}

.sleep-lettering-labels dd {
  margin: 0;
  font-size: calc(18 / 1728 * 100vw);
}

.sleep-book-cover {
  display: grid;
  grid-template-columns: calc(360 / 1728 * 100vw) 1fr;
  gap: calc(28 / 1728 * 100vw);
  margin-top: calc(75 / 1728 * 100vw);
}

.sleep-book-cover .media-placeholder:first-child {
  aspect-ratio: 3 / 4;
}

.sleep-book-cover .media-placeholder:last-child {
  aspect-ratio: 4 / 3;
}

.sleep-book-spreads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(35 / 1728 * 100vw) calc(28 / 1728 * 100vw);
  margin-top: calc(70 / 1728 * 100vw);
}

.sleep-book-spreads .media-placeholder {
  aspect-ratio: 16 / 10;
}

.sleep-outcome {
  margin: calc(90 / 1728 * 100vw) 0 0;
  padding: calc(34 / 1728 * 100vw) 0 0;
  border-top: 0.3px solid #000;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: calc(30 / 1728 * 100vw);
  line-height: 125%;
}

.sleep-fields {
  margin: calc(34 / 1728 * 100vw) 0 0;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: calc(16 / 1728 * 100vw);
  color: #777;
}

@media (max-width: 800px) {
  .sleep-lettering-sequence {
    grid-template-columns: 1fr;
  }
}