/* ================================================
Component: Membership Benefits
Path: components/flexible/membership_benefits/style.css
================================================ */
:is(body, .is-preview) {
	.membership-benefits {
		background-color: rgba(112,191,74,0.25);
		margin: -20px 0;

		&.bg-navy {
			background-color: rgba(60, 69, 89, .25);
		}
		&.bg-tan {
			background-color: rgba(215, 207, 182, .5);
		}
		&.bg-yellow {
			background-color: rgba(244, 179, 53, .25);
		}
		&.bg-green {
			background-color: rgba(112, 191, 74, .25);

			.membership-benefits__title {
				color: var(--color-kale);
			}
		}
		&.bg-dark-green {
			background-color: rgba(36, 69, 23, .25);

			.membership-benefits__title {
				color: var(--color-kale);
			}
		}
		&.bg-red {
			background-color: rgba(195, 60, 50, .25);
		}
		&.bg-brown {
			background-color: rgba(88, 69, 71, .25);
		}
		&.bg-gray {
			background-color: rgba(125, 125, 125, .25);
		}
	}
	.membership-benefits-wrapper {
		    padding: 80px 0;
	}
	.membership-benefits__header {
		margin-bottom: var(--gap-lg);
	}
	.membership-benefits__title {
		font-family: var(--font-primary);
		font-size: var(--font-size-2xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-navy);
		line-height: normal;
		letter-spacing: 3.6px;
		margin:0;
	}
	.membership-benefits__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.membership-benefits__card {
		background-color: var(--color-white);
		border-radius: var(--radius-md);
		padding: var(--gap-lg) 26px var(--gap-lg);
		text-align: center;
	}
	.membership-benefits__icon {
		margin-bottom: var(--gap-md);
		display: flex;
		justify-content: center;
	}
	.membership-benefits__icon img {
		width: 40px;
		height: 40px;
		object-fit: contain;
	}
	.membership-benefits__card-title {
		font-family: var(--font-secondary);
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-dark);
		margin-bottom: 4px;
		line-height: normal;
		letter-spacing: 0.135px;
	}
	.membership-benefits__card-desc {
		font-family: var(--font-secondary);
		font-size: var(--font-size-md);
		color: #474747;
		font-weight: var(--font-weight-light);
		line-height: normal;
		margin: 0;
	}
	.membership-benefits__actions {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	.membership-benefits__actions .btn {
		padding: 12px 16px;
		font-size: 14px;
	}
	@media (min-width: 768px) {
		.membership-benefits__grid {grid-template-columns: repeat(2, 1fr);}
	}
	@media (min-width: 1024px) {
		.membership-benefits__grid {grid-template-columns: repeat(3, 1fr);}
	}
}