@import "@automattic/typography/styles/fonts";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.gifting-checkout-banner {
	display: flex;
	margin: 0 auto 32px;
	background: url(calypso/assets/images/gifting/pink-background.jpg) no-repeat top left;
	background-size: cover;
	width: 100%;
}

.gifting-checkout-banner img {
	display: none;
	align-self: flex-end;
	height: 144px;
	width: 234px;
	@include break-large {
		display: inline-block;
	}
}

.gifting-checkout-banner div {
	display: inline-block;
	padding: 5px 20px;
	@media (min-width: 700px) {
		padding: 18px 26px;
	}
	@include break-large {
		padding: 26px 52px;
		width: 514px;
	}
}

.gifting-checkout-banner h2 {
	font-family: $brand-serif;
	font-style: normal;
	font-weight: 400;
	font-size: rem(28px);
	line-height: 52px;
	color: var(--studio-black);
}

.gifting-checkout-banner p {
	font-family: "SF Pro Text", $sans;
	font-style: normal;
	font-weight: 400;
	font-size: $font-body;
	line-height: 24px;
	color: var(--studio-gray-80);
	letter-spacing: -0.32px;
}

body .gifting-checkout-banner + .composite-checkout .checkout__summary-area {
	position: -webkit-sticky; /* Legacy Browsers */
	position: sticky;
	top: 79px;
}
body .gifting-checkout-banner + .composite-checkout .checkout__summary-body {
	position: initial;
	height: initial;
}
