/**
 *
 * micromagnetics.de
 * Copyright 2025 Daniel Czarnecki <d.czarnecki@outlook.de>
 * Alle Rechte vorbehalten.
 *
 */

.product-items
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	gap: var(--spacing-3);
}

.product-items > div.panel
{
	margin-top: var(--spacing-8);
	background-color: var(--color-fill-tertiary);
	border: 1px solid var(--color-separator-primary);
	border-radius: var(--radius-large);
}
.product-items > div.panel > div.thumbnail
{
	width: 100%;
	position: relative;
}
.product-items > div.panel > div.thumbnail > img
{
	position: absolute;
	height: 7rem;
	left: calc((100% - 7rem)/2);
	top: -3rem;
	border-radius: var(--radius-large);
	border: 1px solid var(--color-separator-primary);
	box-shadow: var(--shadow-medium);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (min-width: 58rem) /* DESKTOP */
{
	.product-items
	{
		flex-direction: row;
	}
	.product-items > div.panel
	{
		position: relative;
		width: calc(31.3%);
		height: 22.5rem;
	}
	.product-items > div.panel > div.buttons
	{
		position: absolute;
		width: 100%;
		bottom: 0;
	}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (max-width: 58rem) /* MOBILE */
{
	.product-items
	{
		flex-direction: column;
	}
	.product-items > div.panel
	{
		width: 100%;
		
	}
}