/* --------------------------------------------------------------------------
   Flavors Page
   -------------------------------------------------------------------------- */
.FlavorsContent {
	padding:				80px 40px;
}

.FlavorsContentInner {
	max-width:				1200px;
	margin:					0 auto;

	font-family:			var(--FontBody);
	font-size:				20px;
	font-weight:			300;

	color:					var(--ColorDarkGray);
}

.FlavorsTitle {
	font-size:				clamp(32px, 4vw, 48px);
	font-family:			var(--FontHeader);
	font-weight:			900;
	text-align:				center;
	margin:					0 0 20px 0;
}

.FlavorsIntro {
	text-align:				center;
	line-height:			1.3;
	max-width:				800px;
	margin:					0 auto 60px auto;
}

.FlavorsEmpty {
	text-align:				center;
}

/* --------------------------------------------------------------------------
   Flavor Cards Grid
   -------------------------------------------------------------------------- */
.FlavorsCards {
	display:				grid;
	grid-template-columns:	repeat(3, 1fr);
	gap:					30px;
}

.FlavorCard {
}

.FlavorCardHeader {
	font-family:			var(--FontHeader);
	font-size:				20px;
	font-weight:			900;

	margin-bottom:			8px;
}

.FlavorCardTag {
	display:				inline-block;

	background-color:		var(--ColorRed);
	color:					var(--ColorOffWhite);

	font-family:			var(--FontHeader);
	font-size:				14px;
	font-weight:			800;

	padding:				4px 10px;
	margin:					0 0 12px 0;

	border-radius:			4px;
}

.FlavorCardDivider {
	height:					4px;
	background:				var(--ColorPurple);
	border:					none;
	margin:					0 0 15px 0;
}

.FlavorCardIngredients {
	margin-top:				15px;
}

.FlavorCardIngredientsLabel {
	font-weight:			700;
	font-size:				18px;
	display:				block;
	margin-bottom:			5px;
}

.FlavorCardIngredientsList {
	font-size:				16px;
	line-height:			1.4;
	color:					var(--ColorDarkGray);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.FlavorsCards {
		grid-template-columns:	repeat(2, 1fr);
		gap:					25px;
	}
}

@media (max-width: 600px) {
	.FlavorsContent {
		padding:				50px 30px;
	}

	.FlavorsCards {
		grid-template-columns:	1fr;
		gap:					40px;
	}

	.FlavorCardHeader {
		font-size:				22px;
	}
}