.solitaire-tutorial {
  box-sizing: border-box;
  width: min(94%, 58rem);
  margin: 0 auto 5rem;
  padding: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid #3d4a43;
  background: #080b0a;
  color: #f4f1de;
}

.solitaire-tutorial h1 {
  color: #d5ff76;
  font-family: "Solitaire Mono", monospace;
  text-align: left;
  text-decoration: none;
}

.solitaire-tutorial a { color: #d5ff76; }
.solitaire-tutorial p { max-width: 72ch; line-height: 1.6; }
.solitaire-tutorial .intro-image { display: block; max-width: 100%; margin: 1rem auto; }
.solitaire-tutorial .tutorial-step { display: grid; grid-template-columns: minmax(15rem, 1fr) 1fr; align-items: center; gap: 2rem; margin: 3rem 0; }
.solitaire-tutorial .tutorial-step:nth-child(even) img { order: 2; }
.solitaire-tutorial .tutorial-step img { width: 100%; max-height: 44rem; object-fit: contain; border: 1px solid #3d4a43; background: #000; }
.solitaire-tutorial .club { color: rgb(64, 220, 110); }
.solitaire-tutorial .heart { color: rgb(255, 105, 90); }
.solitaire-tutorial .diam { color: #f4f1de; }
.tutorial-cta { text-align: center; font-size: 1.4rem; }

@media (max-width: 700px) {
  .solitaire-tutorial { width: 100%; border-inline: 0; }
  .solitaire-tutorial .tutorial-step { display: block; margin: 4rem 0; }
  .solitaire-tutorial .tutorial-step img { margin-bottom: 1rem; }
}