div { display: grid; grid-template-columns: 2fr 1fr; } #weeknotes-section { grid-column: 2 / 3; display: flex; flex-direction: column; } #written { grid-row: 1; grid-column: 1 / 2; } #weeknotes-list { padding: 0; margin: 0; display: flex; flex-direction: row; column-gap: 1rem; list-style: none; flex-wrap: wrap; } #what-weeknotes { align-self: end; margin-top: -0.75rem; font-weight: normal; } #weeknotes-ifc { padding: 0; margin: 0.25rem 0 0.75rem 0; display: grid; grid-template-columns: min-content 1fr 1fr; column-gap: 1rem; list-style: none; } #weeknotes-early-only { grid-column: 2 / 4; padding-right: calc(50% + 1.5rem); text-align: right; } .early { text-align: right; padding-right: 1rem; } .late { text-align: left; } .month { text-align: center; grid-column: 2 / 4; padding-right: 1rem; } h2 { margin: 0 0 1rem 0; } #weeknotes { margin: 0; } .miss { color: var(--text-dim); } @media (max-width: 30rem) { div { display: flex; flex-direction: column; } }