body.post-template-default.single {

	.site-main {
		padding-bottom: 90px;

		@media screen and (max-width: 1199px) {
			padding-bottom: 40px;
		}

		@media screen and (max-width: 767px) {
			font-size: var(--font-size-md);
		}

		article>.image-container {
			padding-bottom: var(--space-10);

			@media screen and (max-width: 767px) {
				padding-bottom: 16px;
			}
		}

		header {
			h1.page-title {
				font-family: var(--font-family-serif);
				font-size: var(--font-size-5xl);
				font-weight: var(--font-weight-heavy);
				line-height: 100%;
				color: var(--color-dark-blue);
				margin-bottom: var(--space-10);
				hyphens: auto;

				@media screen and (max-width: 1199px) {
					font-size: var(--font-size-4xl);
					margin-bottom: var(--space-8);
				}

				@media screen and (max-width: 991px) {
					font-size: var(--font-size-3xl);
				}
			}
		}
	}

	.publish-date {
		font-size: var(--font-size-base);
		color: var(--color-dark-blue);
		font-weight: var(--font-weight-extra-bold);
		margin-bottom: var(--space-4);
		display: block;

		@media screen and (max-width: 1199px) {
			margin-bottom: var(--space-2);
		}

		@media screen and (max-width: 767px) {
			font-size: var(--font-size-lg);
		}

		@media (max-width: 576px) {
			font-size: var(--font-size-md);
		}
	}

	.intro {
		position: relative;

		.blob-6 {
			position: absolute;
			width: 380px;
			height: auto;
			top: -60px;
			right: 0;
			user-select: none;

			@media screen and (max-width: 1399px) {
				width: 250px;
			}

			@media screen and (max-width: 1199px) {
				top: -150px;
				width: 200px;
			}

			@media screen and (max-width: 992px) {
				display: none;
			}
		}
	}

	.post-content {
		font-size: var(--font-size-xl);
		line-height: 140%;
		color: var(--color-dark-blue);
		font-weight: var(--font-weight-extra-bold);
		margin-bottom: var(--space-10);

		@media screen and (max-width: 1199px) {
			margin-bottom: var(--space-4);
		}

		@media screen and (max-width: 767px) {
			font-size: var(--font-size-lg);
		}

		@media (max-width: 576px) {
			font-size: var(--font-size-md);
		}
	}

	.image-container {

		.image-wrapper {
			img {
				width: 100%;
				height: 500px;
				object-fit: cover;
				max-width: 100vw;

				@media screen and (max-width: 1199px) {
					height: 350px;
				}
			}
		}

	}

}