.intro {
  display: grid;
  gap: var(--space-xx-large) 4em;
  padding-inline: var(--space-large);
  padding-top: var(--space-xxx-large);
  position: relative;
}

.intro .logo {
  display: none;
  justify-self: start;
}

.intro__content {
  display: grid;
  gap: var(--space-x-large);
}

.intro__nav,
.intro__headline,
.intro__project {
  margin-inline: auto;
  width: min(100%, 44em);
}

.intro__nav {
  display: none;
}

.intro__nav ul {
  display: grid;
  font-size: var(--font-size-large);
  letter-spacing: var(--letter-spacing);
  gap: 0.4em;
  margin-bottom: -0.375em;
  margin-top: -0.575em;
}

.intro__nav ul li a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.intro__nav ul li a span {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
}

.intro__headline {
  align-self: end;
  display: grid;
  gap: 2.5em;
  position: relative;
}

.intro__headline h1 {
  font-size: var(--font-size-xxxxx-large);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-x-tight);
  margin-bottom: -0.225em;
  margin-top: -0.3875em;
  text-wrap: balance;
}

.intro__video {
  display: grid;
  margin-bottom: calc(-1 * var(--space-medium));
}

.intro__project {
  display: grid;
}

.intro__project figure {
  background: var(--color-white);
  box-shadow: var(--box-shadow-intro);
  display: grid;
  overflow: clip;
}

.intro__reviews {
  display: grid;
  gap: 2.5em;
  grid-column: -1 / 1;
  grid-template-columns: repeat(auto-fit, minmax(18.75em, 1fr));
  position: relative;
}

.intro__reviews blockquote {
  align-content: start;
  display: grid;
  gap: 1.3em;
  text-align: center;
  text-wrap: pretty;
}

.intro__reviews blockquote:before {
  content: '⭐️⭐️⭐️⭐️⭐️';
  font-size: var(--font-size-large);
  letter-spacing: normal;
  line-height: 1.1;
}

.intro__reviews blockquote q {
  font-style: italic;
  margin-bottom: -0.3875em;
  margin-top: -0.5375em;
}

.intro__reviews blockquote q:before {
  content: '“';
  display: inline;
}

.intro__reviews blockquote q:after {
  content: '”';
  display: inline;
}

.intro__reviews blockquote cite {
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--line-height-tight);
  margin-bottom: -0.3em;
  margin-top: -0.4875em;
}

.intro__reviews blockquote cite:before {
  content: '—';
  display: inline;
}

.intro__reviews div {
  align-self: end;
  display: grid;
}

.intro__reviews div a {
  background: var(--color-blue);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-button);
  color: var(--color-white);
  display: grid;
  font-size: var(--font-size-medium);
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  padding: var(--space-neutral);
  place-content: center;
  pointer-events: auto;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
}



.intro--peekaboo .intro__headline {
  transform: translateY(0);
}

.intro--peekaboo .intro__video {
  filter: blur(0);
  opacity: 1;
  pointer-events: initial;
  transform: scale(1) translateY(0);
}



@media(hover: hover) {

  .intro__nav ul li a span {
    transition: color var(--transition);
  }

  .intro__nav ul li a:focus span,
  .intro__nav ul li a:hover span {
    color: var(--color-ink);
  }

  .intro__reviews div a {
    transition:
      background var(--transition),
      transform var(--transition)
    ;
    will-change: transform;
  }

  .intro__reviews div a:focus,
  .intro__reviews div a:hover {
    background: var(--color-blue-hover);
    transform: scale(1.02);
  }

  .intro__reviews div a:active {
    transform: scale(1) translateY(0.05em);
  }

}



@media(min-width: 64em) {

  .intro {
    grid-template-columns: repeat(20, 1fr);
    padding-inline: var(--space-xx-large);
    padding-top: var(--space-xx-large);
  }

  .intro .logo {
    display: flex;
  }

  .intro__nav {
    display: grid;
  }

  .intro__nav,
  .intro__headline,
  .intro__project {
    margin-inline: initial;
    width: auto;
  }

  .intro__content {
    grid-column: span 9;
    grid-template-rows: auto auto 1fr;
    max-height: calc(100vh - (var(--space-xx-large) * 2));
  }

  .intro__headline {
    transform: translateY(7.325em);
    transition: transform var(--transition-slow);
    will-change: transform;
  }

  .intro__video {
    filter: blur(0.3em);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9) translateY(var(--space-x-large));
    transform-origin: center top;
    transition:
      filter var(--transition-slow),
      opacity var(--transition-slow),
      transform var(--transition-slow)
    ;
    will-change: transform;
  }

  .intro__project {
    grid-column: 10 / span 11;
  }

  .intro__project figure {
    margin: calc(-1 * var(--space-medium));
  }

}



@media(prefers-color-scheme: dark) {

  .intro__reviews div a {
    background: var(--color-slate-3);
  }

}