abdullahtarawneh.com/assets/scss/layouts/blog/list.scss

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;
		}
	}
}