.introduction {
  padding-block: clamp(88px, 9vw, 144px) clamp(80px, 8vw, 128px);
  background: var(--color-background-secondary);
}

.introduction__header {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  align-items: start;
  margin-bottom: clamp(48px, 5.5vw, 88px);
}

.introduction__eyebrow {
  margin-top: 12px;
  padding-left: 15px;
  border-left: 2px solid var(--color-primary);
}

.introduction__title {
  font: italic 700 clamp(36px, 4.5vw, 72px)/1.08 var(--font-heading);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.introduction__line {
  display: block;
  overflow: clip;
  padding: 0 .12em .09em 0;
  margin-bottom: -.09em;
}

.introduction__line > span { display: block; }

.introduction__composition {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2vw, 32px);
  row-gap: 24px;
  align-items: start;
}

.introduction__figure { min-width: 0; }

.introduction__figure--paint {
  grid-column: 1 / 8;
  grid-row: 1 / 4;
}

.introduction__figure--interior {
  grid-column: 9 / 13;
  grid-row: 3 / 6;
  width: 90%;
  justify-self: end;
  margin-top: 12px;
}

.introduction__image-reveal {
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 3 / 2;
}

.introduction__figure--interior .introduction__image-reveal { aspect-ratio: 4 / 5; }
.introduction__image-reveal picture { display: block; width: 100%; height: 100%; }
.introduction__image-reveal img { width: 100%; height: 100%; object-fit: cover; }

.introduction__copy {
  grid-column: 9 / 13;
  color: var(--color-steel);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.9;
  text-wrap: pretty;
}

.introduction__copy--first { grid-row: 1; padding-top: 5px; }
.introduction__copy--second { grid-row: 2; }

.introduction__signature {
  grid-column: 5 / 8;
  grid-row: 4;
  position: relative;
  z-index: 1;
  margin-top: -64px;
  margin-right: -36px;
  padding: 28px 30px 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.introduction__signature-mark { display: block; width: 24px; height: 2px; margin-bottom: 24px; background: var(--color-primary); }
.introduction__signature p { font: italic 700 clamp(25px, 2.2vw, 35px)/1.12 var(--font-heading); letter-spacing: -.035em; text-transform: uppercase; }
.introduction__link { grid-column: 1 / 4; grid-row: 4; justify-self: start; align-self: start; min-width: 170px; margin-top: 12px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.introduction__note { margin-top: 24px; color: var(--color-steel); font-size: 10px; text-align: right; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .introduction__image-reveal picture { transition: transform 650ms cubic-bezier(.2, .65, .3, 1); }
  .introduction__figure:hover picture { transform: scale(1.025); }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .introduction__header { grid-template-columns: 25% minmax(0, 1fr); }
  .introduction__title { font-size: clamp(36px, 4.8vw, 57px); }
  .introduction__copy { grid-column: 8 / 13; font-size: 14px; }
  .introduction__figure--paint { grid-column: 1 / 7; }
  .introduction__figure--interior { grid-column: 9 / 13; width: 100%; }
  .introduction__signature { grid-column: 3 / 7; margin-top: 0; margin-right: 0; padding: 24px; }
}

@media (max-width: 767px) {
  .introduction { padding-block: 72px 64px; }
  .introduction__header { display: block; margin-bottom: 32px; }
  .introduction__eyebrow { margin-top: 0; margin-bottom: 23px; font-size: 10px; letter-spacing: .12em; }
  .introduction__title { font-size: clamp(30px, 7.8vw, 58px); line-height: 1.1; letter-spacing: -.045em; }
  .introduction__line { overflow: visible; }
  .introduction__composition { display: flex; flex-direction: column; gap: 0; }
  .introduction__figure--paint { width: 100%; }
  .introduction__copy { font-size: 14px; line-height: 1.9; max-width: 56ch; }
  .introduction__copy--first { padding-top: 0; margin-top: 28px; }
  .introduction__figure--interior { align-self: flex-end; width: 83%; max-width: 370px; margin-top: 36px; }
  .introduction__copy--second { margin-top: 28px; }
  .introduction__signature { align-self: flex-start; min-width: 210px; margin: 32px 0 0; padding: 24px 28px; }
  .introduction__signature-mark { margin-bottom: 20px; }
  .introduction__signature p { font-size: 28px; }
  .introduction__link { align-self: flex-start; margin-top: 28px; }
  .introduction__note { margin-top: 32px; text-align: left; }
}