.tryby-gry-page .hero-grid{display:grid;grid-template-columns:45% 55%;gap:var(--space-4);align-items:center}
.hero-text{max-width:60ch}
.hero-image img{width:100%;height:auto}

.modes-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3)}
.mode-card{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}

.narrow-left{max-width:65ch}

.split{display:grid;grid-template-columns:55% 45%;gap:var(--space-4);align-items:center}
.split .text{max-width:65ch}
.split .image img{width:100%}

.centered-text{max-width:800px;margin-inline:auto}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}

.cta-box{max-width:600px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}

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

@media(max-width:900px){
.hero-grid{grid-template-columns:1fr}
.split{grid-template-columns:1fr}
}

@media(max-width:600px){
.modes-grid{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
}