#single-post {
	padding-top: 1rem;
	padding-bottom: 1rem;

	@media (min-width: 768px) {
		background: linear-gradient(
			to bottom,
			var(--cp-5) 0 50vh,
			var(--cp-bg-primary) 50vh 100%
		);
	}

	.container {
		display: flex;
		flex-direction: column;
		gap: 1rem;

		header {
			width: 100%;
			margin: 0 auto;

			@media (min-width: 768px) {
				max-width: 640px;
			}

			h1.post-title {
				font-size: 1.5rem;
				line-height: 1.3;

				@media (min-width: 395px) {
					font-size: 1.7rem;
				}

				@media (min-width: 768px) {
					font-size: 2.3rem;
				}
				@media (min-width: 1440px) {
					font-size: 2.7rem;
				}
				@media (min-width: 1600px) {
					font-size: 3rem;
				}
			}

			.post-meta {
				font-size: 0.675rem;
				display: flex;
				gap: 0.5rem;
				font-weight: var(--fw-bold);
			}
		}

		.post-thumbnail {
			width: 100%;
			margin: 0 auto;
			img {
				border-radius: 10px;
				max-width: 100%;
				height: auto;
				display: block;
				margin: 0 auto;
			}
		}

		.post-content {
			width: 100%;
			margin: 0 auto;

			@media (min-width: 768px) {
				max-width: 640px;
			}

			.related-post {
				margin-top: 1rem;
				ul {
					margin-top: 1rem;
					list-style: square;
					display: flex;
					flex-direction: column;
					gap: 0.75rem;
					padding-left: 1rem;
					li {
						border-bottom: 1px dashed var(--trans-dark-1);
						padding-bottom: 0.5rem;
					}
				}
			}
		}
	}
}