@import "/assets/css/common.css?2";

:root {
	--logo-height: 16rem;
	--logo-left: calc(var(--logo-height) / ((2) * (1.732050808)));
	--page-boundary: 64rem;
}

main {
	margin: clamp(2rem, calc(100% - var(--page-boundary)), 4rem);
	grid-gap: clamp(2rem, calc(var(--page-boundary) - 100%), 4rem);

	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 100%, 40rem), max-content));
	grid-template-rows: min-content;
	grid-auto-rows: min-content;
}

.product {
	background-color: var(--white-50);
	margin-left: var(--logo-left);
}

.product > .overview > .text {
	margin: 1rem;
	text-align: justify;
}

.product > .overview > .description {
	min-height: 7rem;
}

@media screen and (max-width: 64rem){
	main {
		margin: 2rem 0 2rem 2rem;
		grid-gap: 2rem;
	}

	.product {
		margin-left: 0;
	}

}