@use "$css/main/variables";
@use "$css/main/mixins";
@use "$css/main/common";

.card {
	background: #fff url(\$images/color-shift.svg) no-repeat top right;
	border: 1px solid #dcdcde;
	border-radius: variables.$border-radius;

	.content {

		@extend .p-4; // stylelint-disable-line scss/at-extend-no-missing-placeholder -- This is a generated class from css/main/common.scss.
		color: variables.$primary-black;

		ul li {
			padding-top: 2px;
			padding-bottom: 6px;
			padding-left: 2em;
			vertical-align: middle;
			background: url(\$images/check.svg) no-repeat;
			background-position: 0 2px;
			background-size: 1.5em;
			// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
			line-height: 1.5em;
			list-style-type: none;
		}
	}

	.cta {

		svg,
		img {
			max-width: 100%;
		}
	}

	@include mixins.breakpoint( xs ) {

		.content {
			padding: variables.$spacing-unit * 3;
		}
	}

	@include mixins.breakpoint( lg ) {
		display: grid;
		grid-template-columns: auto 460px;
	}
}

.footer-note {
	text-align: center;
	margin-top: variables.$halfling;
	color: variables.$gray_70;
}

.body {
	background-color: var(--jp-white-off);
	padding-block-end: 64px;
}

.footer {
	background-color: var(--jp-white);
}
