.legends-hero { background: linear-gradient(125deg, #183d4b, #35677a); }
.legends-catalog { min-height: 420px; padding-bottom: 96px; background: var(--color-surface-deep); }
.legends-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.legends-card { display: grid; align-content: start; gap: 8px; min-height: 0; padding: 26px 30px; border: 1px solid rgba(255, 255, 255, .38); border-left: 4px solid var(--color-accent); border-radius: 10px; background: var(--color-bg); color: var(--color-text); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
.legends-card:hover, .legends-card:focus-visible { border-color: var(--color-primary-dark); border-left-color: var(--color-primary-dark); background: #fffdfa; box-shadow: var(--shadow-md); }
.legends-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.legends-card strong { color: var(--color-surface-deep); font: 700 24px/1.5 var(--font-heading); }
.legends-card__summary { max-width: 58ch; margin: 2px 0 0; color: var(--color-text-secondary); font-size: 16px; line-height: 1.8; }
@media (max-width: 1000px) {
  .legends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .legends-catalog { padding-bottom: 72px; }
  .legends-grid { grid-template-columns: 1fr; }
  .legends-card { min-height: 0; padding: 22px 24px; }
  .legends-card strong { font-size: 23px; }
  .legends-card__summary { font-size: 15px; }
}