.grid-container {
	container: box-grid / inline-size;

	.box {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		isolation: isolate;
		position: relative;

		&:before {
			content: '';
			position: absolute;
			z-index: 0;
			inset: 0;
			background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent 50%);
			background-repeat: no-repeat;
			background-size: cover;
		}

		> * {
			position: relative;
			z-index: 1;
		}
	}
}

.products-grid {
	display: grid;
	--cols: 1;
	grid-template-columns: repeat(var(--cols), 1fr);
	/* gap: .125rem; */
	.box {
		padding: 1rem;
		min-height: calc(100cqi / var(--cols));
		background-repeat: no-repeat;
		background-size: cover;
		color: white;
		cursor: pointer;
		display: flex;
		text-decoration: none;
	}

	@media (width > 768px) {
		--cols: 2;
	}
	@media (width > 1024px) {
		--cols: 4;
	}

}