.concept-page {
  padding: 0;
  display: grid;
  grid-template-rows: 62% 38%;
  background: #f1eee6;
  color: #080808;
}

.concept-page > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.concept-page__copy {
  position: relative;
  padding: clamp(20px, 2.4vw, 34px) clamp(22px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(150px, .85fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(18px, 3vw, 42px);
}

.concept-page__copy small { grid-column: 1 / -1; }
.concept-page__copy h2 {
  align-self: center;
  font: 400 clamp(52px, 4.6vw, 78px)/.82 PlexCond, Plex, sans-serif;
  letter-spacing: -.055em;
}
.concept-page__copy p {
  align-self: center;
  margin: 0;
  font: 12px/1.55 Plex, sans-serif;
}
.concept-page__copy span {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid currentColor;
  font: 9px PlexCond, sans-serif;
  letter-spacing: .16em;
}

.concept-page--far { background: #080808; color: #fff; }
.concept-page--far > img { object-position: center 58%; filter: contrast(1.08) saturate(.82); }
.concept-page--dots { background: #f0ede5; }
.concept-page--dots > img { object-position: center 24%; }
.concept-page--photo { background: #d8d4cb; }
.concept-page--photo > img { object-position: center 20%; }
.concept-page--pop { background: #f35a91; }
.concept-page--pop > img { object-position: center; filter: saturate(1.12) contrast(1.04); }

@media (max-width: 800px) {
  .concept-page { grid-template-rows: 58% 42%; }
  .concept-page__copy {
    padding: 18px 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 7px;
  }
  .concept-page__copy h2 { font-size: clamp(44px, 13vw, 68px); }
  .concept-page__copy p { font-size: 10px; line-height: 1.42; }
  .concept-page__copy span { padding-top: 7px; font-size: 7px; }
}