@layer components {
	.advice-hero__intro {
		padding-block: 52px 46px;
		display: grid;
		gap: 18px;
	}
	.advice-hero__title {
		max-inline-size: 26ch;
	}
	.advice-guide {
		border-block-start: 1px solid oklch(100% 0 0 / 14%);
		display: grid;
		grid-template-columns: minmax(420px, 1fr) minmax(460px, 1.05fr);

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.advice-guide__media {
		min-block-size: 360px;
		border-inline-end: 1px solid oklch(100% 0 0 / 14%);
	}
	.advice-guide__body {
		padding: 44px 40px;
		display: grid;
		gap: 16px;
		align-content: center;
	}
	.advice-guide__tags {
		display: flex;
		gap: 12px;
		align-items: center;
		flex-wrap: wrap;
	}
	.advice-guide__read {
		font-weight: 600;
		font-size: 12px;
		color: oklch(100% 0 0 / 50%);
	}
	.advice-guide__title {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 38px;
		line-height: 1.06;
		letter-spacing: -0.03em;
		margin: 0;
		color: var(--on-dark);
		text-wrap: pretty;
	}
	.advice-guide__desc {
		margin: 0;
		font-size: 16.5px;
		line-height: 1.65;
		color: oklch(100% 0 0 / 70%);
		max-inline-size: 52ch;
	}

	.advice-chips {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		margin-block-end: 26px;
	}

	.advice-faq {
		background: var(--card);
		border-block: 1px solid var(--line);
		padding-block: 64px;
	}
	.advice-faq__grid {
		display: grid;
		grid-template-columns: minmax(340px, 0.8fr) minmax(500px, 1.2fr);
		gap: 52px;
		align-items: start;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.advice-faq__desc {
		margin: 0;
		font-size: 16px;
		line-height: 1.65;
		color: var(--ink-2);
		max-inline-size: 44ch;
	}

	/* Article single template */
	.article__hero {
		padding-block: 44px 0;
	}
	.article__hero-content {
		padding-block-end: 40px;
		display: grid;
		gap: 16px;
	}
	.article__title {
		color: var(--on-dark);
		max-inline-size: 26ch;
	}
	.article__meta {
		display: flex;
		gap: 16px;
		font-size: 13.5px;
		color: oklch(100% 0 0 / 55%);
	}
	.article__body {
		padding-block: 40px 56px;
		display: grid;
		justify-items: center;
	}
	.article__image {
		inline-size: 100%;
		max-inline-size: 900px;
		aspect-ratio: 16 / 9;
		background: var(--plate);
		margin-block-end: 40px;

		img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}
	.article__content {
		inline-size: 100%;
		max-inline-size: 720px;
		font-size: 19px;
		line-height: 1.7;
		color: var(--ink-2);

		p {
			margin: 0 0 1.4em;
		}
		h2 {
			font-size: 30px;
			line-height: 1.15;
			margin: 1.4em 0 0.6em;
			color: var(--ink);
		}
		blockquote {
			border-inline-start: 3px solid var(--signal);
			padding-inline-start: 22px;
			margin: 1.6em 0;
			font-family: var(--mark);
			font-size: 22px;
			line-height: 1.4;
			color: var(--ink);
		}
		figcaption {
			font-size: 13px;
			color: var(--ink-3);
			margin-block-start: 8px;
		}
	}
}