/* fiftyfifty_content block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   two-column media/content, flip + single variants */

.fiftyfifty__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
.fiftyfifty--flip .fiftyfifty__media { order: -1; }
.fiftyfifty--single .fiftyfifty__grid { grid-template-columns: 1fr; }
.fiftyfifty__image { aspect-ratio: 16 / 10; border-radius: var(--radius-md); background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ph-ink); }
@media (max-width: 64em) { .fiftyfifty__grid { grid-template-columns: 1fr; } .fiftyfifty--flip .fiftyfifty__media { order: 0; } }