.Card_Container {
	display: grid;
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	/*prova gioele, nel caso chiedere*/
	/*	overflow: auto;*/
	grid-auto-flow: row dense;
	/*prova gioele, nel caso chiedere*/
	/*	padding: 20px;*/
	--card-gap: 20px;
	gap: var(--card-gap);
	--card-column: minmax(min(300px, 100%), 1fr);
	--card-row: minmax(min(250px, 100%), 1fr);
	--repeat-method: auto-fill;
	grid-template-columns: repeat(var(--repeat-method), var(--card-column));
	grid-template-rows: repeat(var(--repeat-method), var(--card-row));
	justify-content: center;
}

	.Card_Container.AutoFit {
		--repeat-method: auto-fit;
		min-height: unset;
	}

	.Card_Container[ML_Fixed_Column="2"] {
		grid-template-columns: repeat(2, var(--card-column));
	}

	.Card_Container[ML_Fixed_Column="3"] {
		grid-template-columns: repeat(3, var(--card-column));
	}

	.Card_Container[ML_Fixed_Column="4"] {
		grid-template-columns: repeat(4, var(--card-column));
	}

.Card_Flex_Container {
	display: flex;
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	--card-gap: 20px;
	gap: var(--card-gap);
	flex-wrap: wrap;
	justify-content: center;
}

.Card {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content auto min-content;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: var(--content-color);
	--card-accent-color: var(--secondary-600);
	position: relative;
}

	.Card.Single {
		grid-template-rows: auto 40px;
	}

	.Card.W_Double {
		grid-column: span 2;
	}

	.Card.H_Double {
		grid-row: span 2;
		grid-template-rows: min-content auto 40px;
	}

	.Card.W_Triple {
		grid-column: span 3;
	}

	.Card.H_Triple {
		grid-row: span 3;
		grid-template-rows: min-content auto 40px;
	}

	.Card.W_Quadruple {
		grid-column: span 4;
	}

	.Card.H_Quadruple {
		grid-row: span 4;
		grid-template-rows: min-content auto 40px;
	}

	.Card.W_Full {
		grid-column: 1 / -1;
	}

	.Card.H_Full {
		grid-row: 1 / -1;
		grid-template-rows: min-content auto 40px;
	}

	.Card[ML_Status=Error] {
		--card-accent-color: var(--error);
	}

	.Card[ML_Status=Warning] {
		--card-accent-color: var(--warning);
	}

	.Card[ML_Status=Success] {
		--card-accent-color: var(--success);
	}

	.Card[ML_Status=Info] {
		--card-accent-color: var(--info);
	}

	.Card .Card_Header {
		padding: 10px 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: inherit;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		color: var(--card-accent-color);
	}

		.Card .Card_Header:not(:has(*)) {
			display: none;
		}

		.Card .Card_Header > div {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.Card .Card_Header.ColorFilled {
			background-color: var(--card-accent-color);
			color: white;
		}

		.Card .Card_Header .CardTitle {
			font-size: 22px;
		}

		.Card .Card_Header.Tutorial_Card {
			flex-direction: row;
			padding-right: 5px;
		}

	.Card .Card_Body {
		margin: 10px 20px;
		overflow: auto;
	}

		.Card .Card_Body.ColorFilled {
			background-color: var(--card-accent-color);
			color: white;
		}

		.Card .Card_Body .CardIcon {
			font-size: 118px;
		}

		.Card .Card_Body .CardListProps {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}

			.Card .Card_Body .CardListProps.PropsCentered {
				align-items: center;
				height: 100%;
				justify-content: space-evenly;
			}

			.Card .Card_Body .CardListProps.PropsHorizontalyCentered {
				align-items: center;
			}

	.Card .Card_Footer {
		border-top: 1px solid var(--border-color);
		color: var(--card-accent-color);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		font-weight: bold;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

		.Card .Card_Footer:not(:has(*)) {
			display: none;
		}

	.Card[ML_Selectable] {
		transition: .2s ease-out;
	}

	.Card:not([ML_Selectable]) .Card_Footer span.fa-chevron-right {
		visibility: hidden
	}

	.Card[ML_Selectable=All]:hover,
	.Card[ML_Selectable=OnlyBody]:hover {
		/*Breaks the layout*/
		/*transform: scale(1.01);*/
		filter: drop-shadow(2px 4px 6px var(--secondary-200));
		cursor: pointer;
	}

		.Card[ML_Selectable=OnlyFooter] .Card_Footer:hover,
		.Card[ML_Selectable=All]:hover .Card_Footer {
			background-color: var(--secondary-50);
			cursor: pointer;
		}

			.Card[ML_Selectable=OnlyFooter] .Card_Footer:hover span.fa-chevron-right,
			.Card[ML_Selectable=All]:hover .Card_Footer span.fa-chevron-right {
				--fa-secondary-opacity: 1;
			}