@layer components {
	.blog__article {
		max-width: 1100px;
		margin: 0 auto;
		padding: 40px 16px 80px;
	}

	.blog__article .image {
		margin-bottom: 25px;

		img {
			width: 100%;
			object-fit: cover;
			border-radius: var(--border-radius-default);
		}
	}

	.blog__article__content {
		max-width: 1100px;
	}

	.blog__article .headline {
		font-size: 14px;
		font-weight: bold;
		color: var(--color-secondary);
		padding-block: 7px;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.blog__article .title {
		font-size: 32px;
		line-height: calc(42 / 32);
		padding-block: 6px;
		color: var(--color-primary);
	}

	.rich__text__block {
		font-size: 18px;
		line-height: calc(28 / 18);
		color: var(--color-primary);

		p {
			margin-bottom: 1.25em;
		}

		h2,
		h3,
		h4 {
			margin-bottom: 0.75em;
			line-height: 1.3;
			color: var(--color-primary);
		}

		ul,
		ol {
			margin: 1.5em 0;
			padding-left: 1.5em;
		}

		li {
			margin-bottom: 0.5em;
		}

		a {
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 3px;
		}

		img {
			max-width: 100%;
			height: auto;
			display: block;
			margin: 2rem 0;
			border-radius: var(--border-radius-default);
		}

		blockquote {
			border-left: 4px solid #e0e0e0;
			padding-left: 1rem;
			margin: 2rem 0;
			font-style: italic;
			color: #555;
		}
	}

	@media (min-width: 960px) {
		.blog__article {
			padding-top: 60px;
		}

		.blog__article .title {
			font-size: 36px;
			margin: 0;
			line-height: 1.3;
		}
	}
}