.lesson-02-page .hero {
  background:
    linear-gradient(135deg, #1f332f, #315f96);
}

.lesson-02-page .hero-missing-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 25, 30, 0.76), rgba(20, 25, 30, 0.2)),
    linear-gradient(135deg, #1f332f, #315f96 48%, #946b26);
}

.lower-heading {
  margin-top: 26px;
}

.destination-card {
  background: #fbfcf8;
}

.ride-flow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ladder > div {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ladder span {
  display: grid;
  place-items: center;
  width: 32px;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 14px;
  font-weight: 820;
}

.ladder strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

.ladder p {
  margin: 0;
  color: var(--blue);
  font-family: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 760;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ladder,
  .ride-flow {
    grid-template-columns: 1fr;
  }
}