.article .title {
	display: flex; justify-content: space-between; align-items: center; padding: 0 2rem;
}
.article .title h1 {width: 90%; line-height: 1;}
.article .title a {display: flex; gap: 5px;}
.article .title a span {text-decoration: underline;}

.article .author-section {display: flex; flex-direction: column; margin: 2rem; align-items: center; gap: 1rem;}
.article .author-section .author-bio {display: flex; flex-direction: row; gap: 1rem;}
.article .author-section .author-info {align-items: center; text-align: center; font-size: 1.1rem;}
.article .author-section .author-info img {width: 150px; height: auto; margin-bottom: 2rem;}
.article .author-section .author-info .author-content {display: flex; flex-direction: column; gap: 1rem;}
.article .author-section .author-info .social-links {display: flex; justify-content: center; gap: 3rem; font-size: 3.5rem;}
.article .author-section .author-info .social-links a {color: var(--color-main);}
.article .author-section .author-info hr {width: 80%; background-color: #f2f0f0; border: none; height: 20px;}

@media screen and (min-width: 40em) {
	.article .author-section .author-bio {display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%;}
	.article .author-section .author-bio h3 {font-size: x-large;}
	.article .author-section .author-info {text-align: right; display: flex; flex-direction: row; align-items: center;}
	.article .author-section .author-info img {padding: 2rem; width: 500px;}
	.article .author-section .author-info .social-links {font-size: 4.5rem; justify-content: space-between; width: 80%;}
	.article .author-section .author-info hr {width: 100%;}
}