@use "../../../scss/variables/colors";
@use "../../../scss/mixins/breakpoints";
@use "../../../scss/typography";

.jp-recommendations-product-suggestion__header {
	padding: 2rem 2.5rem 1.5rem;

	@include breakpoints.breakpoint( "<782px" ) {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.jp-recommendations-product-suggestion__container {
	padding: 0 2.5rem;

	@include breakpoints.breakpoint( "<782px" ) {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.jp-recommendations-product-suggestion__items {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;

	@include breakpoints.breakpoint( "<782px" ) {
		display: block;

		max-width: 360px;
		margin: 0 auto;
	}
}

.jp-recommendations-product-suggestion__item {

	@include breakpoints.breakpoint( "<782px" ) {
		margin-bottom: 2rem;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.jp-recommendations-product-suggestion__money-back-guarantee {
	margin: 1.25rem 0 1.5rem;
}

.jp-recommendations-product-suggestion__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;

	padding: 1rem 2.5rem;
	min-height: 3.125rem;

	background: var(--jp-white-off);
	color: var(--jp-gray-30);

	font-size: typography.$font-body-small;

	@include breakpoints.breakpoint( "<782px" ) {
		flex-direction: column;
		justify-content: flex-start;

		padding-left: 1rem;
		padding-right: 1rem;

		text-align: center;
	}
}

.jp-recommendations-product-suggestion__timer {
	color: var(--jp-gray-60);

	@include breakpoints.breakpoint( "<782px" ) {
		flex-direction: column;
		justify-content: flex-start;
	}
}

.jp-recommendations-product-suggestion__time {
	display: inline-block;

	width: 140px;
	margin-inline-start: 0.5rem;

	font-size: 1.125rem;
}
