.mechanics-page .hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5);align-items:center}
.hero-text{grid-column:span 5;max-width:520px}
.hero-media{grid-column:span 7}
.hero-media img{width:100%;border:2px solid var(--accent-cyan)}

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

.fleet-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5);align-items:center}
.fleet-text{grid-column:span 6;max-width:600px}
.fleet-media{grid-column:span 6}
.fleet-media img{width:100%;border:2px solid var(--accent-cyan)}

.trajectory-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5);align-items:center}
.trajectory-media{grid-column:span 7}
.trajectory-text{grid-column:span 5}
.trajectory-media img{width:100%;border:2px solid var(--accent-cyan)}

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

.battles-text{max-width:700px}

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

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

.cta-box{max-width:500px;text-align:center}

@media(max-width:1024px){
.hero-text{grid-column:span 6}
.hero-media{grid-column:span 6}
}

@media(max-width:900px){
.hero-grid,.fleet-grid,.trajectory-grid{grid-template-columns:1fr}
.hero-text,.hero-media,.fleet-text,.fleet-media,.trajectory-media,.trajectory-text{grid-column:span 1}
.cycle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.depth-grid,.guide-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
.cycle-grid,.resources-grid{grid-template-columns:1fr}
}