A small CSS pattern for golden-ratio columns

You do not need a design-token library to put φ on the page. CSS Grid will hold the ratio if you let the tracks be unitless.

.magazine {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: var(--space-m);
}

@media (max-width: 767px) {
  .magazine {
    grid-template-columns: 1fr;
  }
}

1.618fr 1fr is the whole trick. The left track takes the larger share; the right track takes the remainder. On a narrow screen, drop to one column so the ratio does not crush the text.

Pair it with a measure on the reading column — max-width: 65ch — and the layout will feel composed even when the viewport is huge.