.chevron-accordion-hero{
	--chevron-depth: 50px;
}

.chevron-accordion-hero {
	position: relative;
	z-index: 1;
	background-color: var(--color-brand-red,#b6151d);
	color: var(--color-white, #ffffff);
}

.chevron-accordion-hero::before {
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(180deg, #B6151D 75%, var( --e-global-color-primary ) 75%);
	mix-blend-mode: color;
}

.chevron-accordion-hero .container {
	max-width: var(--content-width, 1440px);
	margin: 0 auto;
	padding: 32px 0;
}

.chevron-accordion-hero .hero-content {
	padding: 0 1.5rem .5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1rem;
}

.chevron-accordion-hero h1 {
	color: #ffffff;	
}

.chevron-accordion-hero .hero-content .hero-description {
	margin-bottom: 1rem;
}

.chevron-accordion-hero .buttons-container {
	width: 100%;
	display: flex;
	gap: 1rem;
	flex-direction: column;
}
.chevron-accordion-hero .hero-content .button {
	width: 100%;
	text-align: center;
}

/*Accordion styles*/
.chevron-accordion-hero .accordion {
	width: 100%;
	max-width: 100%;
	height: 600px;
	max-height: 97vh;
	overflow: hidden;
	margin: 0;
	clip-path: polygon(50% var(--chevron-depth), 100% 0, 100% calc(100% - var(--chevron-depth)), 50% 100%, 0 calc(100% - var(--chevron-depth)), 0 0);
	background-color: white;
}

.chevron-accordion-hero .accordion ul {
	list-style: none;
	position: relative;
	display: flex;
	flex-direction: column;
    align-items: stretch;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
	transition: all 500ms ease;
	top: 2px;
	height: calc(100% - 4px);
	width: 100%;
}

.chevron-accordion-hero .accordion ul li {
	position: relative;
	z-index: 1;
	height: 25%;
	width: 100%;
	flex-shrink: 1;
	flex-grow: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-color: white;
	transition: all 500ms ease;
	clip-path: polygon(50% var(--chevron-depth), 100% 0, 100% calc(100% - var(--chevron-depth)), 50% 100%, 0 calc(100% - var(--chevron-depth)), 0 0);
}

.chevron-accordion-hero .accordion ul li + li {
	margin-top: calc( ( var(--chevron-depth) - 2px) * -1);
}

.chevron-accordion-hero .accordion li div {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 2rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition: all 500ms ease;
}

.chevron-accordion-hero .accordion li div .accordion-content {
	padding-top: var(--chevron-depth);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 500ms ease;
}

.chevron-accordion-hero .accordion ul:hover li { 
	height: 8%; 
	/*clip-path: polygon(55% 0, 100% 50%, 55% 100%, 0% 100%, 45% 50%, 0% 0%);
	margin-left: -7%;*/

}

.chevron-accordion-hero .accordion ul:hover li:hover { 
	height: 60%;
	/*cli*p-path: polygon(88% 0, 100% 50%, 88% 100%, 0% 100%, 12% 50%, 0% 0%);*/
 }

 .chevron-accordion-hero .accordion ul:hover li .accordion-content {
	opacity: 1;
}

@media (min-width: 992px) {
	.chevron-accordion-hero::before {
		background-image: linear-gradient(90deg, #B6151D 75%, var( --e-global-color-primary ) 75%);
	}

	.chevron-accordion-hero .container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		padding: 0;
	}

	.chevron-accordion-hero .hero-content {
		flex: 4;
		padding: 4rem 2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.chevron-accordion-hero .hero-content .hero-description {
		max-width: 400px;
	}
	.chevron-accordion-hero .buttons-container {
		flex-direction: row;
	}

	.chevron-accordion-hero .hero-content .button {
		width: auto;
		text-align: left;
		display: inline-block;
	}
	
	/*Accordion styles*/
	.chevron-accordion-hero {
		--chevron-depth: 100px;
	}

	.chevron-accordion-hero .accordion {
		width: 60%;
		max-width: 800px;
		height: auto;
		max-height: 100vh;
		clip-path: polygon(calc(100% - var(--chevron-depth)) 0, 100% 50%, calc(100% - var(--chevron-depth)) 100%, 0% 100%, var(--chevron-depth) 50%, 0% 0%);
	}

	.chevron-accordion-hero .accordion ul {
		left: 2px;
		top: 0;
		width: calc(100% - 4px);
		height: 100%;
		flex-direction: row;
	}

	.chevron-accordion-hero .accordion ul li {
		width: 25%;
		height: 100%;
		clip-path: polygon(calc(100% - var(--chevron-depth)) 0, 100% 50%, calc(100% - var(--chevron-depth)) 100%, 0% 100%, var(--chevron-depth) 50%, 0% 0%);
	}

	.chevron-accordion-hero .accordion ul li + li {
		margin-left: calc( ( var(--chevron-depth) - 2px) * -1);
		margin-top: 0;
	}

	.chevron-accordion-hero .accordion ul:hover li { 
		width: 8%; 
		height: 100%;
	}
	
	.chevron-accordion-hero .accordion ul:hover li:hover { 
		width: 60%;
		height: 100%;
	 }
}

@media( min-width: 1200px) {
	.chevron-accordion-hero .accordion {
		min-height: 860px;
	}
}