@import "/styles/layers/components/cards.css" layer(page);
@import "/styles/layers/components/tags.css" layer(page);

@layer page {
	body.methods-page {
		--methods-page-message-box-background-color: var(--color-light-gray-3);
		--methods-page-message-box-foreground-color: var(--color-dark-gray-1);
	}

	@media (prefers-color-scheme: dark) {
		body.methods-page {
			--methods-page-message-box-background-color: var(--color-dark-gray-1);
			--methods-page-message-box-foreground-color: var(--color-light-gray-1);
		}
	}

	body.methods-page,
	body.methods-page > header {
		background-color: var(--landmark-header-background-color-shaded);
		color: var(--landmark-header-foreground-color-shaded);
	}

	.methods-page .message-box {
		background-color: var(--methods-page-message-box-background-color);
		color: var(--methods-page-message-box-foreground-color);
	}

	.pub {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		gap: 0;
		font-style: italic;
		justify-content: space-between;
	}

	ul .card img {
		border-radius: 15px;
		height: auto;
		padding-block: var(--card-image-padding-block);
		width: 100%;
	}

	.methods-page article > .cards {
		display: grid;
		grid-column: col-one / span 16;
		grid-template-columns: subgrid;
		margin-block: var(--article-cards-margin-block, var(--space-l));
	}

	.methods-page article > * {
		grid-column: col-one / span 12;
	}

	.methods-page article > .cards > ul {
		display: grid;
		column-gap: 1rem;
		row-gap: 1rem;
		grid-column: col-one / span 16;
		list-style-type: none;
	}

	.cards > ul {
		grid-template-columns: repeat(3, 33%);
	}

	@media (width < 90rem) {
		.methods-page article > * {
			grid-column: col-one / span 16;
		}
	}

	/* double column */
	@media (width < 84rem) {
		.cards > ul {
			grid-template-columns: repeat(2, 50%);
		}
	}

	/* single column */
	@media (width < 60rem) {
		.cards > ul {
			grid-template-columns: [cards-start] 1fr [cards-end];
		}
	}
}