@use "../../../scss/mixins/breakpoints";

.jp-recommendations-one-click-restores {

	h2 {
		margin-top: 2rem;
	}

	p {
		margin: 1rem 0;
	}

	.jp-recommendations-one-click-restores__cta {
		margin-top: 2rem;
		text-align: center;
	}
}

.jp-recommendations-getting-started-compact {
	display: grid;
	padding: 1.125rem 0;
	grid-template-columns: minmax(0, 130px) minmax(0, 150px);
	grid-gap: 1rem;

	@include breakpoints.breakpoint( "660px-1040px" ) {
		grid-template-columns: 1fr;
	}

	h2 {
		margin: 0 0 0.2rem;
		font-size: 0.75rem;
		// 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: 1rem;
		letter-spacing: -0.02em;
	}

	p {
		margin: 0;
		font-size: 0.625rem;
		// 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: 1rem;
		letter-spacing: -0.02em;
	}
}

.jp-recommendations-getting-started-compact__thumbnail {
	display: block;
	width: 100%;
}
