.club-card-benefits {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(max(200px, calc(50% - 16px)), 1fr)
	);
	gap: 16px;

	& .club-card-benefit {
		&:not(:has(.club-card-benefit-trigger)),
		& .club-card-benefit-trigger {
			display: flex;
			gap: 32px;
			align-items: center;

			& .club-card-benefit-icon,
			& .club-card-benefit-trigger-icon {
				width: 56px;
				height: 56px;
				flex-shrink: 0;
				border-radius: var(--radius-full);
				border: 1px solid color-mix(in oklab, currentColor 50%, #fff0);
				display: flex;
				align-items: center;
				justify-content: center;

				& img {
					width: 100%;
					height: 100%;
				}
			}

			& .club-card-benefit-description,
			& .club-card-benefit-trigger-description {
				max-width: 12em;
			}
		}

		& .club-card-benefit-trigger {
			cursor: pointer;
		}
	}
}

.club-card-benefit-panel {
	position: relative;

	padding: 32px;
	background: var(--color-bg-1);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);

	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: calc(min(36em, 100% - 32px));

	& .club-card-benefit-panel-close {
		position: absolute;
		top: -8px;
		right: -8px;
		z-index: 1;
		padding: 8px;
		color: var(--color-fg-1);
		border-radius: var(--radius-full);
		cursor: pointer;
	}

	& .club-card-benefit-panel-heading {
	}

	& .club-card-benefit-panel-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;

		& .club-card-benefit-panel-icon {
			width: 56px;
			height: 56px;
			flex-shrink: 0;
			border-radius: var(--radius-full);
			border: 1px solid var(--color-border);
			display: flex;
			align-items: center;
			justify-content: center;

			& img {
				width: 100%;
				height: 100%;
			}
		}

		& .club-card-benefit-panel-summary {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			text-align: center;

			& .club-card-benefit-panel-title {
				max-width: 20em;
			}
		}
	}
}