.block.rewards-summary {
	
	.layout {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-block) var(--spx4);
	}

		.membership-perks {
			grid-column: span 2;
		}

		@container (max-width: 700px) {
	
			.layout {
				grid-template-columns: 1fr;
			}

				.membership-perks {
					grid-column: auto;
				}
		}

	.bordered {
		padding: var(--spx3);
		border: 1px solid var(--border);
	}

	h2 {
		margin-bottom: 0.5em;
		font-size: var(--h4);
	}

	.rewards-progress {
		display: flex;
		flex-direction: column;
		gap: 0.75em;
	}

	.progress-bar {
		position: relative;
		height: 16px;
		background: linear-gradient(90deg, var(--torch-blue-50) var(--progress), var(--gray-10) var(--progress));

		@media (min-width: 768px) {
			display: none;
		}
	}

	.progress-text {

		strong {
			font-weight: 700;
			color: var(--brand-blue-50);
		}

		a {
			text-decoration: underline;
		}
	}

	.available-rewards {}

	.rewards {
		display: grid;
		gap: 1em;
		margin-top: 1.5em;
	}

	.no-reward {
		font-weight: 700;
	}

	.reward {
		display: flex;
		align-items: center;
		gap: 1em;
		padding: 12px 24px 12px 12px;
		background: oklch(from var(--torch-blue-50) l c h / 0.04);
		border: 1px solid var(--border);
		border-radius: 100px;

		svg {
			flex: 0 0 auto;
		}

		.text {
			flex: 1 1 100%;
		}

		h3 {
			margin: 0 0 0.2em;
			font-size: var(--h5);
			line-height: 1;
		}

		p {
			margin: 0;
			line-height: 1.2;
		}
	}

	.rewards-disclaimer {
		margin: 1em 0 0;
		font-size: var(--body-small);
		font-style: italic;
	}

	.annual-spend {}

	.progress {
		--width: 256px;
		--thickness: 30px;
		aspect-ratio: 1;

		display: flex;
		display: none;
		justify-content: center;
		align-items: center;
		position: relative;
		margin: var(--spx4) auto 0;
		width: var(--width);

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: conic-gradient(from -90deg, var(--torch-blue-50) var(--progress), var(--gray-10) var(--progress));
			border-radius: 50%;
			transform: scaleX(-1);
		}

		&:after {
			content: '';
			position: absolute;
			left: var(--thickness);
			top: var(--thickness);
			right: var(--thickness);
			bottom: var(--thickness);
			border-radius: 50%;
			background: var(--white-100);
		}

		.text {
			display: flex;
			flex-direction: column;
			gap: 0.5em;
			position: relative;
			z-index: 1;
			text-align: center;
		}

		.amount {
			font-size: 60px;
			line-height: 1;
			font-weight: 700;
			color: var(--brand-blue-50);
		}

		.description {
			font-size: 14px;
			line-height: 1;
			font-weight: 700;
		}
	}

	.membership-perks {}

	.membership-perks-table {
		width: 100%;

		tbody tr {
			border-top: 1px solid var(--border);
		}

		th,
		td {
			padding: 0.75em;
			text-align: center;
			line-height: 1.2;

			&:first-child {
				text-align: left;
			}

			img {
				display: inline-block;
				vertical-align: middle;
			}
		}

		&.-pacesetter .pacesetter-cell {
			background: var(--torch-blue-50-05);
		}

		&.-frontrunner .frontrunner-cell {
			background: var(--torch-blue-50-05);
		}

		@container (max-width: 349px) {
			font-size: 13px;
		}
	}
}