.author-section {
	padding-top: 80px; 
	padding-bottom: 80px; 
	background-color: white;
}

.meta-section {
	gap: 50px;
	justify-content: center;
}
.meta-section .meta-image {
	align-self: baseline;
	width: 500px;
	height: auto;
	aspect-ratio: 1; 
	object-fit: cover;
	max-width: 30%;
	border-radius: 10px;
}

.meta-section h1 {
	color: black;
	font-size: 30px;
	margin-top: 0;
	margin-bottom: 15px;
	line-height: 1; 
}

.posts-section {
	margin-top: 60px; 
}
.posts-section h2 {
	text-align: center; 
	margin-top: 0;
	font-size: 30px;
}

.posts-section .posts {
	margin-top: 30px;
}
.posts-section .post {
	width: 100%;
	height: auto; 
}
.posts-section .post .top {
	display: block;
	width: 100%;
	height: auto; 
	aspect-ratio: 4/3;
	border-radius: 10px;
	overflow: hidden;
}
.posts-section .post .top img {
	width: 100%;
	height: 100%; 
	object-fit: cover;
}

.posts-section .post h3 {
	font-weight: 600;
	color: #333;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 0;
}
.posts-section .post h3 a {
	transition: 0.4s;
}
.posts-section .post h3 a:hover {
	color: rgb(59, 126, 0) !important;
	transition: 0.4s;
}

.posts-section .post .name-and-date {
	margin-top: 5px;
}

.posts-section .post .read-more {
	margin-top: 5px; 
	color: rgb(59, 126, 0);
	display: block; 
	width: 100%;
}
.posts-section .post .read-more:hover {
	text-decoration: underline;
}

@media screen and (max-width: 820px) {
	.meta-section {
		flex-direction: column;
		align-content: center;
		gap: 20px; 
	}
	
	.meta-section .meta-image {
		align-self: center;
		max-width: 300px;
	}
	
	.meta-section h1 {
		text-align: center; 
		margin-bottom: 20px;
	}
}