.catalog-page { background: #f5f4f0; }
.catalog-intro { padding: 150px 0 88px; }
.catalog-intro-grid { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 7vw; }
.catalog-intro h1 { max-width: 900px; margin: 0; font-size: clamp(3.5rem, 5.8vw, 6.6rem); line-height: .92; }
.catalog-intro-grid > div:first-child > p { color: var(--orange); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.catalog-intro-grid > div:last-child > p { color: #5b6872; font-size: 1.08rem; }
.catalog-list { background: #fffefa; }
.catalog-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 82px 28px; align-items: start; }
.catalog-card { min-width: 0; }
.catalog-card { grid-column: span 6; }
.catalog-card:nth-child(4n + 1), .catalog-card:nth-child(4n + 4) { grid-column: span 7; }
.catalog-card:nth-child(4n + 2), .catalog-card:nth-child(4n + 3) { grid-column: span 5; }
.catalog-card a { display: grid; }
.catalog-card .catalog-card-media { position: relative; display: block; color: inherit; font-size: inherit; font-weight: inherit; text-transform: none; }
.catalog-card img { width: 100%; aspect-ratio: 4 / 3.35; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.catalog-card .catalog-card-banner { position: absolute; z-index: 1; top: clamp(16px, 2.2vw, 28px); left: clamp(16px, 2.2vw, 28px); max-width: calc(100% - 32px); padding: 12px 18px 11px; color: #fffefa; font-size: clamp(.78rem, 1.15vw, 1rem); font-weight: 900; line-height: 1.08; letter-spacing: .045em; text-transform: uppercase; background: var(--orange); border-radius: 6px 6px 16px 6px; box-shadow: 5px 5px 0 var(--yellow); transform: rotate(-1.2deg); }
.catalog-card .catalog-card-banner-quest { top: auto; right: clamp(16px, 2.2vw, 28px); bottom: clamp(16px, 2.2vw, 28px); max-width: min(88%, 340px); color: var(--ink); background: var(--yellow); box-shadow: 5px 5px 0 var(--orange); transform: rotate(1.1deg); }
.catalog-card img.catalog-image-top { object-position: center top; }
.catalog-card:nth-child(4n + 2) img, .catalog-card:nth-child(4n + 3) img { aspect-ratio: 4 / 4.2; }
.catalog-card.catalog-card-level-up { grid-column: span 7; }
.catalog-card.catalog-card-level-up img { aspect-ratio: 4 / 3.35; }
.catalog-card.catalog-card-portrait { grid-column: span 5; }
.catalog-card.catalog-card-portrait img { aspect-ratio: 3 / 4; object-position: center; }
.catalog-card.catalog-card-square { grid-column: span 6; }
.catalog-card.catalog-card-square img { aspect-ratio: 1; object-position: center top; }
.catalog-card a > div { position: relative; padding: 22px 58px 0 0; }
.catalog-card span { color: var(--orange); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.catalog-card h2 { margin: 10px 0 12px; font-size: clamp(2rem, 3.15vw, 3.9rem); line-height: .94; }
.catalog-card p { max-width: 540px; margin: 0; color: #626e78; }
.catalog-card i { position: absolute; right: 0; top: 24px; display: grid; width: 46px; height: 46px; place-content: center; border: 1px solid var(--ink); font-size: 1.2rem; transition: color .25s ease, background .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.catalog-card a:hover img { transform: scale(.985); }
.catalog-card a:hover i { color: #fff; background: var(--orange); transform: translate(3px,-3px); }
.catalog-help { padding: 120px 0; color: #fff; background: #142436; }
.catalog-help h2 { max-width: 850px; color: #fff; }
.catalog-help p { max-width: 650px; color: #bec8d0; font-size: 1.1rem; }
.catalog-help .button { margin-top: 20px; }
@media (max-width: 767px) {
  .catalog-intro { padding: 120px 0 72px; }
  .catalog-intro-grid, .catalog-grid { grid-template-columns: 1fr; }
  .catalog-intro-grid { gap: 30px; }
  .catalog-intro h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .catalog-grid { gap: 62px; }
  .catalog-card, .catalog-card:nth-child(n) { grid-column: auto; width: 100%; justify-self: auto; margin-top: 0; }
  .catalog-card:nth-child(n) img { aspect-ratio: 4 / 3.8; }
  .catalog-card:nth-child(n).catalog-card-portrait img { aspect-ratio: 3 / 4; object-position: center; }
  .catalog-card:nth-child(n).catalog-card-square img { aspect-ratio: 1; object-position: center top; }
  .catalog-card .catalog-card-banner { top: 16px; left: 16px; max-width: calc(100% - 32px); padding: 10px 13px 9px; font-size: clamp(.72rem, 3.3vw, .9rem); }
  .catalog-card .catalog-card-banner-quest { top: auto; right: 16px; bottom: 16px; max-width: min(86%, 300px); }
}