.tsg-page {overflow:hidden}

.tsg-hero {position:relative; min-height:90vh; display:flex; align-items:center}
.tsg-hero-media {position:absolute; inset:0}
.tsg-hero-text {position:relative; max-width:480px; margin-left:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2)}
.tsg-hero-text p {max-width:45ch}

.tsg-intro-text {max-width:640px; margin-inline:auto; text-align:center}
.tsg-intro-text p {max-width:65ch; margin-inline:auto}

.tsg-table-grid {display:grid; grid-template-columns:60% 40%; gap:var(--space-3); align-items:start}
.tsg-table-primary {grid-column:1}
.tsg-table-secondary {grid-column:2}
.tsg-table-caption-1 {grid-column:1}
.tsg-table-caption-1 p {max-width:55ch}
.tsg-table-caption-2 {grid-column:2}
.tsg-table-caption-2 p {max-width:55ch}

.tsg-interlude-inner {display:flex; flex-direction:column; align-items:center; gap:var(--space-2)}
.tsg-interlude-inner p {max-width:45ch; text-align:center}

.tsg-game-collage {position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3)}
.tsg-game-img1 {grid-column:1}
.tsg-game-img2 {grid-column:2}
.tsg-game-caption-1 {position:absolute; top:10%; left:5%; max-width:300px}
.tsg-game-caption-1 p {max-width:50ch}
.tsg-game-caption-2 {grid-column:2}
.tsg-game-caption-2 p {max-width:55ch}

.tsg-gathering-grid {display:grid; grid-template-columns:60% 40%; gap:var(--space-3); align-items:center}
.tsg-gathering-text p {max-width:65ch}

.tsg-reflection-text {max-width:680px; margin-inline:auto; text-align:center}
.tsg-reflection-text p {max-width:65ch; margin-inline:auto}

.tsg-cta-inner {display:flex; flex-direction:column; align-items:center; gap:var(--space-2); text-align:center}
.tsg-cta-inner p {max-width:45ch}

.tsg-closing {text-align:center}
.tsg-closing p {max-width:50ch; margin-inline:auto}

@media (max-width:1024px){
.tsg-hero-text{margin-left:var(--space-3)}
.tsg-table-grid{grid-template-columns:1fr}
.tsg-table-caption-1,.tsg-table-caption-2{grid-column:1}
.tsg-game-collage{grid-template-columns:1fr}
.tsg-game-caption-1{position:static}
.tsg-gathering-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
.tsg-hero{min-height:auto; flex-direction:column}
.tsg-hero-text{margin:var(--space-3)}
}