main.blog.list { padding-block: 3rem; .categories { ul { list-style: none; padding-inline-start: 0; li {margin-block: 0.5rem;} } } .posts { display: grid; gap: 2rem; } .pagination { list-style: none; padding: 0; display: flex; gap: 1rem; .page-item { display: inline-block; background: var(--color-highlight-weak); &:hover { background: var(--color-highlight); } border-radius: 100rem; &.active { background: unset; font-weight: bold; } &.disabled { display: none; } .page-link { display: inline-grid; place-items: center; text-decoration: none; width: 1.5rem; height: 1.5rem; } } } @media (min-width: 60rem) { display: grid; grid-template-areas: "header header" "categories posts"; gap: 2rem 4rem; grid-template-columns: auto 1fr; width: 100%; > header { grid-area: header; } .categories { grid-area: categories; } .posts { grid-area: posts; .h-entry {max-width: 40rem;} } } }