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

@layer page {
	:root {
		--landmark-header-background-color: var(--color-light-gray-1);
		--landmark-header-foreground-color: var(--color-dark-gray-1);
	}

	.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%;
	}

	main > article.tools-page > .cards {
		display: grid;
		grid-column: col-one / span 16;
		grid-template-columns: subgrid;
	}

	main > article.tools-page > .cards .cards-filter {
		grid-column: col-one / span 16;
	}

	main > article.tools-page > .epilogue {
		grid-column: var(--text-width);
	}

	main > article.tools-page > .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%);
	}

	/* 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];
		}
	}
}