@page { size: A3 landscape; margin: 0; }
* { box-sizing: border-box; }
body { margin: 0; color: #222b32; background: #fff; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; }
.poster { width: 420mm; height: 297mm; padding: 12mm 15mm; display: flex; flex-direction: column; gap: 5mm; }
header { border-bottom: 1.2mm solid #087f98; padding-bottom: 4mm; }
header p { margin: 0 0 2mm; font-size: 11pt; color: #53636d; }
h1 { margin: 0; font-size: 35pt; }
h2 { margin: 2mm 0 0; font-size: 21pt; color: #087f98; }
.question { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; }
p { font-size: 12pt; line-height: 1.4; margin: 3mm 0; }
.columns { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12mm; flex: 1; }
.columns > div { min-width: 0; }
h3 { font-size: 17pt; line-height: 1.25; margin: 3mm 0; }
img { width: 100%; height: auto; display: block; margin: 4mm 0; }
.result { font-size: 26pt; font-weight: 700; color: #087f98; padding-left: 4mm; border-left: 1.5mm solid #d66a16; }
.result span { font-size: 13pt; display: block; color: #222b32; }
.small { font-size: 10pt; color: #53636d; }
footer { border-top: .5mm solid #cad5da; padding-top: 4mm; font-size: 10pt; line-height: 1.4; }
@media screen and (max-width: 900px) { .poster { width: 100%; height: auto; padding: 24px; } .question, .columns { grid-template-columns: 1fr; gap: 20px; } h1 { font-size: 30px; } h2 { font-size: 23px; } h3 { font-size: 21px; } p { font-size: 16px; } .small, footer { font-size: 14px; } }