.components-surface.components-card {
	border-radius: var(--jp-border-radius-rna);
}

.upsell-banner {
	display: flex;
	flex-direction: column;

	background: rgb(249, 249, 246);
	background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);

	@media screen and (min-width: 660px) {
		flex-direction: row;
	}

	&.components-card__body.components-card-body {
		border-radius: var(--jp-border-radius-rna);
		padding: 36px;
	}

	.upsell-banner--icon {
		display: flex;
		align-items: flex-start;
		margin-bottom: 16px;
		margin-right: 0;
		margin-top: 16px;

		@media screen and (min-width: 660px) {
			align-items: center;
			margin-bottom: 0;
			margin-right: 28px;
			margin-top: 0;
		}
	}

	.upsell-banner--content {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;

		@media screen and (min-width: 660px) {
			flex-direction: row;
		}

		.upsell-banner--content-info {
			display: flex;
			flex-direction: column;

			h3 {
				font-size: 1.5rem;
				line-height: 32px;
				font-weight: 500;
				margin: 0;
			}

			p {
				font-size: 1rem;
				margin: 8px 0 0 0;
			}
		}

		.upsell-banner--content-cta {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 16px;
			margin-left: 0;

			@media screen and (min-width: 660px) {
				margin-top: 0;
				margin-left: 16px;
			}

			.upsell-banner--content-cta-button {
				white-space: nowrap;
				box-shadow: inset 0 0 0 1.5px rgb(0, 0, 0);
				font-weight: 400;
				padding: 8px 16px;

				&.secondary {
					background-color: var(--jp-white);
					color: var(--jp-black);
				}

				&.primary {
					margin-left: 8px;
				}
			}
		}
	}
}
