@layer components {
	@scope (.resources) {
		/* Hero */
		.resources-hero {
			padding-block-end: calc(var(--stack) * 4);
		}

		.resources-hero__inner {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 1.5);
		}

		.resources-hero h1 {
			max-inline-size: 800px;
		}

		.resources-hero p {
			font-size: var(--font-size-lg);
			color: var(--color-text-faint-invert);
			max-inline-size: 600px;
		}

		/* Card section (Guides, Checklists) */
		.resources-cards {
			padding-block-start: calc(var(--stack) * 4);
		}

		.resources-section-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-block-end: calc(var(--stack) * 2);
			gap: var(--gutter);
			flex-wrap: wrap;
		}

		.resources-section-header__aside {
			font-size: var(--font-size-sm);
			color: var(--color-text-faint-invert);
		}

		.resources-card-grid {
			--grid-min-size: clamp(16rem, 40vw, 28rem);
			gap: calc(var(--gutter) * 1.5);
		}

		.resources-card-grid[data-layout="thirds"] {
			--grid-min-size: clamp(14rem, 30%, 22rem);
		}

		/* FAQ */
		.resources-faq {
			display: flex;
			flex-wrap: wrap;
			gap: calc(var(--gutter) * 4);
		}

		.resources-faq__heading {
			min-inline-size: 240px;
			flex: 1 1 300px;
			position: sticky;
			inset-block-start: 48px;
			align-self: flex-start;
		}

		.resources-faq__heading h2 {
			color: var(--color-text-invert);
		}

		.resources-faq__list {
			display: flex;
			flex-direction: column;
			flex: 1 1 300px;
		}

		.resources-faq__item {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 0.75);
			padding-block: calc(var(--stack) * 1.5);
			border-block-start: 1px solid
				oklch(from var(--color-text-invert) l c h / 10%);
		}

		.resources-faq__item h3 {
			font-size: var(--font-size-lg);
			color: var(--color-text-invert);
		}

		.resources-faq__item p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted-invert);
		}
	}
}