section.perks {
	margin-block: 64px 64px;
	display: flex;
	flex-direction: column;
	gap: 16px;

	& .perks-heading {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-inline: 16px;
		gap: 16px;

		& .perks-title {
		}

		& .perks-carousel-controls {
			display: flex;
			gap: 8px;

			& .perks-carousel-control {
				width: 48px;
				height: 48px;
				border-radius: var(--radius-full);
				border: 1px solid var(--color-border);
				cursor: pointer;

				transition-property: background, border;

				&:hover {
					background: var(--color-bg-2);
				}

				&:active {
					background: var(--color-bg-1);
				}
			}
		}
	}

	& .perks-carousel {
		counter-set: perk-index;

		& .perks-carousel-container {
			display: flex;
			gap: 16px;
			padding-inline: 16px;

			& .perks-perk {
				flex-basis: max(30%, 400px);
				max-width: 100%;
				flex-shrink: 0;
				flex-grow: 1;
				counter-increment: perk-index;

				display: flex;
				flex-direction: column;
				gap: 16px;

				& .perks-perk-thumbnail {
					aspect-ratio: 4 / 3;
					border-radius: var(--radius);
					overflow: clip;
					display: flex;
					flex-direction: column;

					& img {
						flex-basis: 0;
						flex-grow: 1;
						min-height: 0;

						width: 100%;
						height: 100%;
					}
				}

				& .perks-perk-info {
					display: flex;
					flex-direction: column;
					gap: 32px;

					& .perks-perk-heading {
						display: flex;
						gap: 16px;

						& .perks-perk-index {
							border-radius: var(--radius-full);
							width: 2.25em;
							height: 2.25em;
							display: flex;
							align-items: center;
							justify-content: center;
							aspect-ratio: 1 / 1;
							border: 1px solid var(--color-border);

							&::after {
								content: counter(
									perk-index,
									decimal-leading-zero
								);
							}
						}

						& .perks-perk-title {
						}
					}

					& .perks-perk-description {
						max-width: 18em;
						color: var(--color-fg-3);

						& .perks-perk-description-footnote {
							font-size: var(--text-sm);
							color: var(--color-fg-2);
						}
					}
				}
			}
		}
	}
}