.tutorial-route .section-heading { margin-bottom: 30px; }

.tutorial-route .featured-card { box-shadow: 0 18px 46px rgba(47, 41, 39, .08); }

.tutorial-route .featured-image img { object-position: 50% 44%; }

.tutorial-route .tutorial-facts { grid-template-columns: .7fr 1.3fr; }

.tutorial-card-list { display: grid; gap: 34px; }

.featured-card-reverse { grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); }
.featured-card-reverse .featured-copy { grid-row: 1; grid-column: 1; }
.featured-card-reverse .featured-image { grid-row: 1; grid-column: 2; }

.tutorial-route .visual-button {
  border: 1px solid var(--cocoa);
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.tutorial-route .visual-button:hover,
.tutorial-route .visual-button:focus-visible {
  color: var(--cocoa);
  background: var(--ivory);
}

@media (max-width: 560px) {
  .tutorial-route .tutorial-facts { grid-template-columns: 1fr; }
  .tutorial-route .tutorial-facts div + div {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .tutorial-route .visual-button { width: 100%; }
}

@media (max-width: 800px) {
  .featured-card-reverse { grid-template-columns: 1fr; }
  .featured-card-reverse .featured-image { grid-row: 1; grid-column: 1; }
  .featured-card-reverse .featured-copy { grid-row: 2; grid-column: 1; }
}