/* Not yet, and plain dealing. */
.notyet { padding: var(--section-gap) var(--gutter) 0; }
.notyet__grid { max-width: 1296px; margin-inline: auto; display: grid; gap: var(--s7); }
.notyet__text { display: grid; gap: var(--s4); max-width: 52ch; align-content: start; }
.notyet__text h3 { margin-top: var(--s3); }
.steps { counter-reset: step; display: grid; gap: var(--s3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; gap: var(--s2); }
.steps li::before { content: counter(step); font: 2rem / 1 var(--font-hand); color: var(--terra-600); }
.photo { width: 84%; margin-right: auto; padding: 10px; background: var(--paper); border-radius: 2px; box-shadow: var(--card-shadow); transform: rotate(var(--tilt)); }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.photo figcaption { padding: var(--s3) var(--s2) var(--s1); text-align: right; color: var(--sea-700); }
@media (min-width: 900px) {
  .notyet__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .notyet__text { grid-column: 1 / 7; }
  .photo { grid-column: 8 / 12; width: 100%; padding: 16px; }
}

.plain { max-width: 1296px; margin-inline: auto; padding: var(--section-gap) var(--gutter) 0; display: grid; gap: var(--s3); }
.plain__row { display: grid; gap: var(--s6); margin-top: var(--s5); }
.plain__row li {
  display: grid; gap: var(--s3); align-content: start; width: 84%; padding: var(--s5); border-radius: 2px;
  background: var(--paper); box-shadow: var(--card-shadow); transform: rotate(var(--tilt));
}
.plain__row li:nth-child(even) { margin-left: auto; }
.plain__row p { font-size: 1.0625rem; line-height: 1.45; }
@media (min-width: 900px) {
  .plain__row { grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s7); }
  .plain__row li { width: 100%; padding: var(--s6); }
}