@page { size: auto; margin: 0; } *, *::before, *::after { box-sizing: border-box; } body { display: grid; grid-template-columns: 1fr min(800px, 90%) 1fr; margin: 0; font-size: 1.1rem; } body > * { grid-column: 2; } #links { padding-inline-start: 1rem; } @media (min-width: 480px) { #links { display: flex; width: 100%; justify-content: space-between; padding-inline: 0; } #links li { list-style: none; } } x-entry { display: grid; grid-template-columns: 1fr 1fr; } x-entry > header { font-weight: bold; } x-entry > :is(x-job-title, x-time-range, x-description) { text-align: right; } x-entry > p { grid-column: span 2; } section > x-entry:not(:last-child) { margin-bottom: 1rem; } dl { display: grid; grid-template-columns: max-content auto; row-gap: 1rem; dt { grid-column-start: 1; font-weight: bold; } dd { grid-column-start: 2; } }