/* feature styles */

.slideshow-panel-module-container {
	margin-bottom: 4em;
}

.slideshow-panel {
	display: none;
	overflow: hidden;
}
.slideshow-panel:first-child {
	display: block;
}

.slideshow-panel .image-module {
	position: relative;
	overflow: hidden;
}
.slideshow-panel .image-module img {
	display: block;
	position: relative;
	z-index: 2;
	width: 50%;
	margin: 1.5rem auto;
}

.slideshow-panel .image-module .background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.slideshow-panel .image-module .background-overlay-clip {
	clip-path: polygon(100% 0, 100% 100%, 50% calc(100% - 40px), 0 100%, 0% 0%);
}

.slideshow-panel .text-module-content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: start;
	max-width: 498px;
	margin-right: 0;
	margin-left: auto;
}

/* font-sizes min @ 370, max @ 720 */
.slideshow-panel-heading {
	margin: 0;
	font-size: clamp(2.25rem, -0.3929rem + 11.4286vw, 4.75rem);
	font-weight: 700;
	line-height: 1.026315789474;
}
.slideshow-panel-caption {
	margin: 0;
	font-size: clamp(0.75rem, 0.4857rem + 1.1429vw, 1rem);
	font-weight: 600;
}

@media all and (max-width: 19.9375em) {
	.slideshow-panel .image-module:has(.background-image:only-child) {
		padding: 0 0 62.0098039%;
	}
}

@media all and (min-width: 20em) {
	.slideshow-panel {
		background: linear-gradient(
			to right,
			var(--colour-gradient-1) 0%,
			var(--colour-gradient-2) 56%
		);
	}
	.slideshow-panel-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		min-height: clamp(366px, 68.8888888889vw, 496px);
	}
	.slideshow-panel .image-module {
		display: flex;
		order: 1;
		align-self: stretch;
		align-items: center;
	}
	.slideshow-panel .image-module img {
		width: auto;
	}

	.slideshow-panel .image-module .background-overlay {
		top: 50%;
		width: 102%;
		height: 102%;

		transform: translateY(-50%);
	}
	.slideshow-panel .image-module .background-overlay-clip {
		clip-path: polygon(
			100% 0,
			100% 100%,
			0% 100%,
			clamp(96px, 2.8286rem + 13.7143vw, 144px) 50%,
			0% 0%
		);
	}

	.slideshow-panel .text-module:first-child {
		grid-column-end: span 2;
		justify-self: center;
	}
	.slideshow-panel .text-module:first-child .text-module-content {
		max-width: none;
	}
}

@media all and (min-width: 45em) {
	.slideshow-panel-module-container {
		margin-bottom: 5.375em;
	}
}

@media all and (min-width: 60em) {
	.slideshow-panel .text-module-content {
		padding-right: clamp(1rem, -2rem + 5vw, 2.5rem);
		padding-left: clamp(1rem, -2rem + 5vw, 2.5rem);
	}
}

@media all and (min-width: 80em) {
	.slideshow-panel-content {
		grid-template-columns: 640px 1fr;
	}
	.slideshow-panel .image-module img {
		left: 7.5%;
	}
}

.feature-page-section .text-module .content {
	max-width: 27.75em;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
}

@media all and (max-width: 44.9375em) {
	.feature-page-section .conditional-flex {
		display: flex;
		flex-direction: column-reverse;
	}
	.feature-page-section .site-section-intro {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	.feature-page-section .image-module .content:nth-child(1) {
		margin-top: 1.5em;
		margin-bottom: 0;
	}
}

.feature-panel .content {
	position: relative;
	text-align: left;
	overflow: hidden;
}
.feature-panel .text-module {
	container: feature-panel-text-module / inline-size;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: start;
	gap: clamp(0.875rem, 3.7037037037cqw, 1.5rem);
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: 0;
	z-index: 2;
	width: 60%;
	max-width: 21.875em;
	padding: clamp(0.875rem, 3.7037037037cqw, 1.5rem) 0;
	padding-right: calc(17.28395% + clamp(0.875em, 3.086419753cqw, 1.25em));
	padding-left: clamp(0.875em, 3.086419753cqw, 1.25em);
	box-sizing: border-box;

	clip-path: polygon(0% 0%, 68% 0, 100% 50%, 68% 100%, 0% 100%);
}
.feature-panel-heading {
	margin: 0;
	font-size: clamp(1.75rem, -0.1488rem + 14.966cqw, 3.125rem);
	font-size: clamp(1.75rem, -0.2361rem + 27.1605cqw, 3.125rem);
}
.feature-panel .button-small {
	white-space: nowrap;
}
.feature-panel .image-module {
	z-index: 1;
	padding-left: 36.728395061728395%;
}
.feature-panel .no-img {
	padding: 0 0 89.2682926829%;
}

@media all and (max-width: 44.9375em) {
	.feature-panel-section {
		padding-top: 1.125em;
		padding-bottom: 1.125em;
	}

	.feature-page-section + .feature-panel-section {
		padding-top: 0;
	}

	.feature-panel-section .grid-child-2-up {
		margin-top: -0.75em;
		margin-bottom: -0.75em;
	}
	.feature-panel-section > .grid-child-2-up > .grid-item {
		padding-top: 0.75em;
		padding-bottom: 0.75em;
	}
}

@media all and (min-width: 45em) {
	.feature-panel-section {
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}

	.feature-page-section + .feature-panel-section {
		padding-bottom: 4em;
	}
}

.feature-product-carousel {
	text-align: left;
}

.feature-product {
	width: 100%;
	max-width: 341px;
	margin: 24px auto;
}
.feature-product a {
	display: block;
	position: relative;
	min-height: 250px;
	text-decoration: none;
	overflow: hidden;

	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.feature-product:nth-child(odd) a {
	background-color: var(--colour-neutral-100);
	color: var(--colour-neutral-900);
}
.feature-product:nth-child(even) a {
	--colour-gradient-1: var(--colour-primary-200);
	--colour-gradient-2: var(--colour-sector);
	--colour-gradient-fg: var(--colour-neutral-000);

	background: linear-gradient(
		to right,
		var(--colour-gradient-1) 0%,
		var(--colour-gradient-2) 100%
	);
	color: var(--colour-gradient-fg);
}
.feature-product .text-module {
	position: relative;
	z-index: 3;
	padding: 0.875em 1em;
	text-align: left;
}
.feature-product-heading {
	margin: 0;
	font-size: 1.25em;
}
.price-module-feature-product .price {
	font-size: 2.4375em;
	font-weight: 700;
	line-height: 1;
}
.price-module-feature-product .price .smaller {
	font-size: 1.6875rem;
}
.price-module-feature-product .price-prefix,
.price-module-feature-product .price-suffix {
	display: block;
}
.feature-product .image-module {
	position: relative;
	z-index: 2;
}
.feature-product .image-module img {
	display: block;
}

.feature-product .background-overlay {
	position: absolute;
	z-index: 1;

	clip-path: var(--tg-hexagon-alternative-clip-path);
}

.feature-product:nth-child(odd) .background-overlay {
	top: -34px;
	left: -92px;
	width: 296px;
	height: 256px;
}
.feature-product:nth-child(even) .background-overlay {
	right: -134px;
	bottom: -61px;
	width: 310px;
	height: 268px;
}

/* start of text/image side by side */
@media all and (min-width: 20em) {
	.feature-product a {
		display: flex;
	}
	.feature-product .text-module {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: 0.625rem;
		width: 136px;
	}
	.feature-product .flex-expand-this {
		display: flex;
		flex-direction: column;
		gap: 0.9375rem;
		flex: 1 1 auto;
	}

	.feature-product .image-module {
		position: absolute;
		top: 50%;
		right: 0;
		width: 55.1319648%;

		transform: translateY(-50%);
	}
}

/* 397px - start of carousel */
@media all and (min-width: 24.8125em) {
	.feature-product {
		display: inline-block;
		vertical-align: top;
		width: 341px;
		max-width: none;
		margin: 0 24px 24px 0;
	}
}

@media all and (min-width: 45em) {
	.feature-product {
		width: 583px;
	}
	.feature-product a {
		min-height: 400px;
	}
	.feature-product .text-module {
		gap: 2rem;
		width: 248px;
		padding: 2em 2.3125em 1.5em;
	}
	.feature-product .flex-expand-this {
		gap: 2rem;
	}
	.feature-product-heading {
		font-size: 2.125em;
	}

	.price-module-feature-product .price {
		font-size: 3.125em;
	}
	.price-module-feature-product .price .smaller {
		font-size: 2.375rem;
	}

	.feature-product .button-small {
		min-width: min(100%, 135px);
	}

	.feature-product .image-module {
		width: 322px;
	}

	.feature-product .background-overlay {
		width: 567px !important;
		height: 490px !important;
	}
	.feature-product:nth-child(odd) .background-overlay {
		top: -175px;
		left: -147px;
	}
	.feature-product:nth-child(even) .background-overlay {
		right: -190px;
		bottom: -181px;
	}
}