.about-page{position:relative}

.about-hero{position:relative}
.about-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.about-hero .container{position:relative;z-index:1;display:flex;align-items:center;min-height:420px}
.about-hero-card{max-width:480px;display:flex;flex-direction:column;gap:var(--space-3)}

.about-concept .card{display:flex;flex-direction:column;gap:var(--space-3)}

.about-atmosphere-grid{display:grid;grid-template-columns:60% 40%;gap:var(--space-5);align-items:center}
.about-atmosphere-text{max-width:720px}
.about-atmosphere-image img{border:var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-offset)}

.about-poker-img{max-width:500px;margin:0 auto var(--space-5)}

.about-steps .card{display:flex;flex-direction:column;gap:var(--space-2)}

.about-philosophy > div{display:flex;flex-direction:column;gap:var(--space-3)}

.about-audience-img{max-width:600px;margin:0 auto var(--space-5)}

.about-cta-panel{max-width:500px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3);align-items:center;background:var(--color-brand-blue)}

@media (max-width:900px){
.about-atmosphere-grid{grid-template-columns:1fr}
.about-hero .container{min-height:auto;padding-top:var(--space-5)}
}