.membership--wrapper {
	padding: 3rem 0 4rem;

	.content-width {
		gap: 2.5rem;
	}

	.membership--heading {
		max-width: 830px;
		margin: 0 auto;
		font-style: italic;
		font-size: calc(
			(var(--font-size__base) * var(--font-factor__h4)) + 0.5rem
		);

		span {
			font-family: var(--font__serif);
		}

		.fancy-font {
			font-family: var(--font__serif);
		}
	}

	.membership--cards {
		align-items: center;
		justify-content: center;

		.membership--card--item {
			flex: 1 1 100%;
			background: var(--card-bg);
			gap: 0;

			&.renew-card {
				.card--link--image {
					background: var(--gradient-blue-teal);
					i {
						color: var(--brand-teal);
					}
				}
			}
			&.join-card {
				.card--link--image {
					background: var(--gradient-blue-teal);
					i {
						color: var(--brand-gold);
					}
				}
			}
			&.rejoin-card {
				.card--link--image {
					background: var(--gradient-blue-teal);
					i {
						color: var(--brand-blue);
					}
				}
			}

			.card--image {
				border: 0.35rem solid #f0f0f0;
				position: relative;

				.card--link--image {
					display: block;
					img {
						filter: opacity(0.7) saturate(0.6) brightness(1.2);
						transition: all 0.2s ease-in-out;
					}

					&:hover {
						img {
							transform: unset;
							filter: opacity(1) saturate(1) brightness(1);
						}
						i {
							filter: brightness(0.7);
						}
					}
				}

				i {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 5rem;
					z-index: 99;
				}
			}

			img {
				width: 100%;
			}

			.card-content--wrapper {
				padding: 1rem 1rem 1.5rem;

				.card--heading {
					margin: 0;
					text-align: center;
					line-height: 1.2;
					font-size: calc(
						var(--font-size__base, 18px) *
							var(--font-factor__h4, 1.2)
					);

					a {
						color: var(--brand-blue);
						font-weight: 500;
						text-decoration: none;

						&:hover {
							color: var(--brand-teal);
						}
					}
				}

				.card--content,
				.card-link--wrapper {
					text-align: center;
				}

				.card--link {
					text-decoration: none;
					span {
						text-decoration: underline;
					}
				}
			}
		}
	}
}

@media screen and (min-width: 825px) {
	.membership--wrapper {
		.membership--cards {
			max-width: 1100px;
			margin: 0 auto;
			.membership--card--item {
				flex: 0 1 calc(32% - 0.667rem);

				&.join-card {
					flex: 0 1 calc(35% - 0.667rem);
				}

				.card-content--wrapper {
					padding: 1.5rem 0.5rem 2rem;
				}
			}
		}
	}
}
@media screen and (min-width: 1150px) {
	.membership--wrapper {
		.membership--cards {
			.membership--card--item {
				max-width: 1100px;
				margin: 0 auto;
				.membership--card--item {
					flex: 0 1 calc(26% - 0.667rem);

					&.join-card {
						flex: 0 1 calc(35% - 0.667rem);
					}
				}
			}
		}
	}
}