#posts-container {
	padding-right: 3rem;
}

#posts-container .spinning-load {
	margin: 3rem auto;
	color: var(--primary-color);
	place-items: center;
	transition: 0.1s;
}

#posts-container .spinning-load.hidden {
	margin: 0 auto;
	height: 0;
}

.posts {
	display: grid;
	grid-gap: 3rem;
}


.posts .post {
	display: grid;
	border-radius: 5px 5px 0 0;
	grid-gap: 1rem;
	overflow: hidden;
	padding-bottom: 3rem;
	margin-bottom: 1rem;
}

.post:not(:last-of-type) {
	border-bottom: 1px solid var(--secondary-main);
}

.post__title {
	margin: 0;
	color: var(--primary-dark);
}

.post__title a {
	text-decoration: none;
	color: var(--primary-dark);
}

.post__info {
	display: flex;
	gap: .25rem;
	font-size: .75rem;
	font-weight: 500;
	color: var(--primary-dark);
	white-space: nowrap;
	flex-wrap: wrap;
}

.post__text {
	line-height: 1.5rem;
	color: var(--primary-dark);
}

.post__link {
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--primary-dark);
}

.posts__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;

	font-size: .75rem;
	font-weight: 500;

	border-top: 1px solid var(--primary-main);
	padding-block: 1.5rem;
}

.posts__pages {
	display: flex;
	gap: 2.25rem;
	align-items: center;
}

.posts__page {
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	padding: 0;
	font-size: .75rem;
	transition: .25s;
}

.posts__page.selected:hover {
	background-color: var(--primary-dark);
	color: white;
}

.posts__page.selected {
	background-color: var(--secondary-main);
	cursor: unset;
}