.about-page section{position:relative}

.about-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:center}
.about-hero__text{max-width:52ch}
.about-hero__media img{width:100%;height:auto}

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

.about-world__grid{display:grid;grid-template-columns:60% 40%;gap:var(--space-5);align-items:center}
.about-world__text{max-width:65ch}

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

.about-progress__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:center}
.about-progress__text{max-width:65ch}

.about-story__inner{max-width:60ch;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}

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

.about-cta__box{max-width:50ch;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5)}

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

@media (max-width:900px){
.about-hero__grid,.about-world__grid,.about-progress__grid{grid-template-columns:1fr}
.about-hero__text,.about-world__text,.about-progress__text{max-width:100%}
}

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

@media (max-width:600px){
.about-gameplay__grid,.about-unique__grid,.about-audience__grid{grid-template-columns:1fr}
}