.membership-options {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 20px;
	margin-bottom: 20px;
}

.membership-option {
	display: grid;
	grid-template-rows: auto 1fr;
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 7px 11px -4px rgba(0, 23, 62, 0.2), 0 0 1px 0 #a8b9d5;
	transition: box-shadow .2s;
}

.membership-option:hover {
	box-shadow: 0 0 11px rgba(33, 33, 33, .2);
}

.membership-option:nth-child(1) .membership-option-header {
	background-color: #dcfffb;
}

.membership-option:nth-child(2) .membership-option-header {
	background-color: #ffdcf4;
}

.membership-option:nth-child(3) .membership-option-header {
	background-color: #dabfde;
}

.membership-option-header {
	height: 115px;
	padding: 16px 8px;
	text-align: center;
}

.membership-option-header > h3, .membership-option-header > p {
	margin-bottom: 0;
}

.membership-option-price {
	padding: 16px 8px;
	text-align: center;
	border-bottom: 1px solid var(--bs-border-color);
}

.membership-option-price > h5 {
	margin-bottom: 0;
	font-size: 20px;
}

.membership-option > ul {
	margin-bottom: 0;
	padding: 4px 16px 16px;
	list-style: none;
	font-size: 16px;
}

.membership-option li {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 48px;
}

.membership-option i.bi {
	margin-right: 0.5em;
}

.membership-option i.bi-check-circle-fill {
	color: #23bf6e;
}

.membership-option i.bi-x-circle-fill {
	color: #d82a68;
}

.credits {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 7px 11px -4px rgba(0, 23, 62, 0.2), 0 0 1px 0 #a8b9d5;
}

.credits-header {
	flex-grow: 1;
	flex-shrink: 1;
	padding: 20px;
}

.credits-redeem-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
	.membership-options {
		grid-template-columns: repeat(3, 1fr);
	}

	.credits {
		flex-direction: row;
	}
}