/* Meal Plans Selection Styles */

.meal-plans-selection-section {
	width: 100%;
}

.meal-plans-selection-section-container {
	width: 100%;
  	display: flex;
	padding: 64px 84px;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	align-self: stretch;
	background: #F4F4F6;
}

.meal-plans-selection-title {
  	color: var(--typography-high, #212121);
	text-align: center;
	font-family: "Gotham Bold";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%; /* 24px */
}

.meal-plans-selection-container {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.meal-plan-card {
  	display: flex;
	width: 380px;
	max-height: 128px;
	padding: 32px;
	justify-content: center;
	align-items: center;
	gap: 24px;
	border-radius: 8px;
	border: 1px solid var(--primary-high, #00B6B6);
	background: var(--teal-50, #E4F0F0);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
	cursor: pointer;
	text-decoration: none !important;
	color: inherit;
}

.meal-plan-card:hover,
.meal-plan-card:focus,
.meal-plan-card:active,
.meal-plan-card:visited {
	text-decoration: none !important;
	color: inherit;
}

.meal-plan-card * {
	text-decoration: none !important;
}

.meal-plan-title-description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	flex: 1 0 0;
}

.meal-plan-title {
	color: var(--teal-700, #008C8C);
	leading-trim: both;
	text-edge: cap;
	font-family: "Gotham Bold";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

.meal-plan-description {
	align-self: stretch;
	color: var(--typography-high, #212121);
	font-family: Gotham;
	font-size: 14px;
	font-style: normal;
	font-weight: 325;
	line-height: 120%; /* 16.8px */
	letter-spacing: 0.14px;
}

.meal-plan-arrow-button {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
}