/*RESET*/
		
		/*This causes issues by reseting the size and family of font
		html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align:baseline
		}*/

		article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
		display: block
		}

		/*This causes issues with the root spacing
		
		body {
		line-height: 1
		}*/

		ol,ul {
		list-style: none
		}

		blockquote,q {
		quotes: none
		}

		blockquote:before,blockquote:after,q:before,q:after {
		content: '';
		content: none
		}

		table {
		border-collapse: collapse;
		border-spacing: 0
		}



		:root {
		--space: 2rem;
		--space-xs: calc(var(--space) / 3);
		--space-sm: calc(var(--space) / 2);
		--space-md: calc(var(--space) * 2);

		--color-primary: lightgray;
		--color-accent: whitesmoke;
		--color-dark: black;
		--color-mid: gray;
		--color-light: white;
		--color-highlight: dodgerblue;

		--radius: 0.125rem;
		}

		/* Here are the base styles for the main layout and sticky component */
		* {
		box-sizing: border-box;
		}

		main {
		display: flex;
		flex-wrap: wrap;
		}

		.article {
		flex-basis: 0;
		flex-grow: 999;
		min-width: 40%;
		}

		.sidebar {
		--offset: var(--space);
		flex-grow: 1;
		/*If you want to set a default value, use this*/
		/*flex-basis: 450px;*/
		align-self: start;
		position: sticky;
		top: 5.5rem; /*9.5rem; = 2.5rem for the li in top nav + 2 rem padding *//*var(--offset);*/
		}

		.component {
		display: grid;
		grid-template-rows: auto 1fr auto;
		}

		.component .content {
		/*A  max-height on the content limits the component’s growth on larger screen sizes. This is unnecessary if it’s preferred that the component stretch to fill the viewport height.*/
		/*max-height: 500px;*/
		overflow-y: auto;
		}

		.sidebar .component {
		max-height: calc(100vh - var(--offset) * 2);
		}
		
		
		/* Until flexbox gap is supported in all modern browsers, we use the negative margin trick to create space between the children elements */
		main {
		margin-bottom: calc(var(--space-md) * -1);
		margin-left: calc(var(--space-md) * -1);
		}

		main > * {
		margin-bottom: var(--space-md);
		margin-left: var(--space-md);
		}

		article > * + * {
		margin-top: var(--space);
		}




		
	
	/**/
	
	
		.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-gap: var(--space-sm);
		}

		.grid .item {
		flex-direction: column;
		text-align: center;
		}

		.grid .info {
		display: flex;
		flex-direction: column;
		align-items: center;
		}

		.grid .thumbnail {
		--size: 100px;
		margin-bottom: var(--space);
		}

		.list > * + * {
		margin-top: var(--space-xs);
		}

		.list .item {
		padding: var(--space-sm);
		}

		.list .item::before {
		content: "×";
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: var(--space-sm);
		font-size: 2rem;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.05rem;
		color: var(--color-primary);
		pointer-events: none;
		}

		.list .thumbnail {
		--size: 50px;
		margin-right: var(--space-sm);
		}

		div.button {
		appearance: none;
		padding: var(--space-xs) var(--space-sm);
		font-family: inherit;
		font-size: 1rem;
		color: white;
		background-color: var(--color-accent);
		border: 1px solid var(--color-accent);
		cursor: pointer;
		border-radius: var(--radius);
		box-shadow: rgba(black, 0.1) 4px 4px;
		}

		div.button:active {
		transform: translateY(1px);
		box-shadow: none;
		}

		.empty-cart {
		color: var(--color-mid);
		border-color: var(--color-mid);
		background-color: var(--color-light);
		}