/* The image container gets a background-image applied through css */
.ftps-banner-image {
	background-size: cover;
	padding-bottom: var(--ftps-banner-image-padding-bottom);
	position: relative;
}

/* Annalee styles */
.page-section-banner {
	border-radius: var(--ftps-banner-border-radius);
	overflow: hidden;
}

/* If this is the first section in an output position remove the border & border-radius on the top of the image */
.ft-page-sections .page-section-banner:first-child img {
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.banner-inner {
	border-radius: var(--ftps-banner-inner-border-radius);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	display: flex;
	flex-direction: column-reverse;
	overflow: hidden;
	position: relative;
}

.ftps-banner-image::before {
	background: linear-gradient(to bottom, var(--banner-accent-color, var(--banner_accent_color)), var(--banner-accent-color, var(--banner_accent_color)) 0, transparent);
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.ftps-banner-image img {
	opacity: 0;
	position: absolute;
	z-index: -1;
}

.ftps-banner-image .ft-shop-the-image {
	position: static;
}

.ftps-banner-image .shop-the-image-button {
	z-index: 4;
}

.ftps-banner-content {
	background-color: var(--banner-accent-color, var(--banner_accent_color));
	position: relative;
}

.ftps-banner-content * {
	color: var(--banner-text-color, var(--banner_text_color, inherit));
}

.banner-content {
	padding: 0 var(--ftps-banner-content-padding);
}

/* At some point the image/content get next to each other */
@media (min-width: 45em) {

	.banner-inner {
		background-color: var(--banner-accent-color, var(--banner_accent_color));
		margin: 0 auto;
		max-width: var(--ftps-banner-max-width);
		position: relative;
	}

	.ftps-banner-content {
		background-color: transparent;
		max-width: 70%;
		padding: var(--ftps-banner-content-padding);
		z-index: 2;
	}

	.ftps-banner-image {
		bottom: 0;
		min-width: 70%;
		padding-bottom: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	.ftps-banner-image::before {
		background: linear-gradient(to right, var(--banner-accent-color, var(--banner_accent_color)), var(--banner-accent-color, var(--banner_accent_color)) 16.6666%, transparent);
	}
}

@media (min-width: 45em) {

	.banner-inner {
		background-color: var(--banner_accent_color);
		margin: 0 auto;
		max-width: var(--ftps-banner-max-width);
		position: relative;
	}

	.ftps-banner-content {
		background-color: transparent;
		max-width: 70%;
		padding: var(--ftps-banner-content-padding);
		z-index: 2;
	}

	.ftps-banner-image {
		bottom: 0;
		min-width: 70%;
		padding-bottom: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	.ftps-banner-image::before {
		background: linear-gradient(to right, var(--banner_accent_color), var(--banner_accent_color) 16.6666%, transparent);
	}
}