.ACCORDION {
	transition: min-height 0.25s;
	position: relative;
}
.ACCORDION.ACCORDION:not([data-variant="_image"]) {
	width: min(var(--col-10), 100%);
	margin: 0 auto;
}

.ACCORDION .row {
	color: var(--white);
	background: #0F3159;
	border-radius: 10rem;
	position: relative;
	transition: 0.25s;
	overflow: hidden;
}
.ACCORDION .row::before {
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%), #0F3159;
	transition: 0.25s;
}
.ACCORDION .row.alt-active::before { opacity: 1; }

.ACCORDION .row:not(:last-child) {
	margin-bottom: 20rem;
}

.ACCORDION .heading {
	z-index: 1;
	margin: 0;
	gap: 20rem;
	display: flex;
	position: relative;
	align-items: center;
	position: relative;
	padding: 22rem 30rem;
	transition: color 0.25s;
}

.ACCORDION .heading > *:not(button) {
	margin: 0;
}

.ACCORDION .toggle {
	/* position: relative; */
	flex: 0 0 auto;
	width: 49rem;
	height: 49rem;
	text-indent: -9999rem;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: transparent;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.25s;
	box-shadow: inset 0 0 0 1.5rem var(--bright-light-blue);
}
.ACCORDION .row:not(.alt-active) .toggle::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ACCORDION .row .toggle svg { 
	fill: none;
	margin: 0 -1rem 0 0;
	transform: rotate(-90deg);
	transition: 0.25s;
}
.ACCORDION .row .toggle svg path { stroke: var(--bright-light-blue); }

.ACCORDION .row.alt-active .toggle { background: var(--bright-light-blue); }
.ACCORDION .row.alt-active .toggle svg { transform: rotate(0deg); margin: 0 -1rem -3rem 0; }
.ACCORDION .row.alt-active .toggle svg path { stroke: var(--midnight-blue); }

.ACCORDION .container {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s;
}

.ACCORDION .content {
	position: relative;
	padding: 0 30rem 30rem 99rem;
	z-index: 1;
}

.ACCORDION:not([data-variant="_image"]) .content a { color: var(--white); text-decoration: underline; }
.ACCORDION:not([data-variant="_image"]) .content a:hover { color: var(--bright-light-blue); }

@media screen and (max-width: 960px) {
	.ACCORDION {}

	.ACCORDION .heading { padding: 22rem 74rem 22rem 30rem; display: block; }

	.ACCORDION .toggle {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background: transparent;
	}

	.ACCORDION .row .toggle {
		box-shadow: none;
		border-radius: none;
		background: transparent;
	}
	.ACCORDION .row.row.alt-active .toggle { background:transparent; }

	.ACCORDION .row .toggle .toggle-inner {
		position: absolute;
		top: 0; 
		top: 22rem;
		right: 22rem;
		width: 29rem;
		height: 29rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border-radius: 50%;
		box-shadow: inset 0 0 0 1.5rem var(--bright-light-blue);
	}  
	.ACCORDION .row.alt-active .toggle .toggle-inner { background: var(--bright-light-blue); }

	.ACCORDION .row .toggle svg { 
		fill: none;
		margin: 0 -1rem 0 0;
		transform: rotate(-90deg) scale(0.5);
		transition: 0.25s;
	}
	.ACCORDION .row.alt-active .toggle svg { transform: rotate(0deg) scale(0.5); margin: 0 -1rem -3rem 0; }
	
	.ACCORDION .content {
		position: relative;
		padding: 0 30rem 30rem;
		z-index: 1;
	}
}




/* image */

.ACCORDION[data-variant="_image"] .rows {
	position: relative;
	padding: 0 1035rem 0 0;
	counter-reset: index;
}

.ACCORDION[data-variant="_image"] .row {
	border-radius: 0;
	position: static;
	background: transparent;
	counter-increment: index;
}

.ACCORDION[data-variant="_image"] .row:not(:last-child) { margin-bottom: 30rem; }

.ACCORDION[data-variant="_image"] .row::before { display: none; }

.ACCORDION[data-variant="_image"] .heading {
	border-radius: 10rem;
	text-align: center;
	padding: 10rem 40rem;
	background: transparent;
	justify-content: center;
	border: 1.5rem solid var(--white);
}

.ACCORDION[data-variant="_image"] .row.alt-active .heading {
	background: var(--white);
	color: var(--midnight-blue);
}

.ACCORDION[data-variant="_image"] .heading h4 {
	font-size: 18rem;
	line-height: calc(28/18);
}

.ACCORDION[data-variant="_image"] .heading .toggle {
	width: 100%;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	height: 100%;
	background-color: transparent;
}

.ACCORDION[data-variant="_image"] .heading .toggle svg { display: none; }

.ACCORDION[data-variant="_image"] .container {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	width: 1000rem;
	display: flex;
	gap: 35rem;
	flex-direction: row-reverse;
	transition: opacity 0.25s;
}

.ACCORDION[data-variant="_image"] .row.alt-active .container {opacity:1;}

.ACCORDION[data-variant="_image"] .row .content {
	padding: 0 0 0 80rem;
	flex: 1 0 55.5%;
	box-sizing: border-box;
}

.ACCORDION[data-variant="_image"] .row .content::before {
	content: counter(index);
	position: absolute;
	top: 0;
	left: 0;
	width: 60rem;
	height: 60rem;
	border-radius: 50%;
	background: var(--white);
	color: var(--midnight-blue);
	font-weight: 700;
	font-size: 32rem;
	line-height: calc(42/32);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ACCORDION[data-variant="_image"] .row.alt-active .content ul > li { margin-bottom: 0; }


.ACCORDION[data-variant="_image"] .row .image {
	width: 45%;
	height: 100%;
}
.ACCORDION[data-variant="_image"] .row .image > img {
	width: auto;
}

@media screen and (max-width: 960px) {
	.ACCORDION[data-variant="_image"] .row .content {
		padding: 20rem;
		flex: 1 1 100%;
		margin: 0 0 20rem;
	}
	
	.ACCORDION[data-variant="_image"] .content { padding: 0; }
	.ACCORDION[data-variant="_image"] .row .content::before {display: none;}
	
	.ACCORDION[data-variant="_image"] .rows {min-height: 0 !important; padding: 0;}
	.ACCORDION[data-variant="_image"] .container {position:static; width:auto; padding: 0; flex-direction: column;}
	.ACCORDION[data-variant="_image"] .row .image {width: 100%;}
	.ACCORDION[data-variant="_image"] .image .b-img-offset { margin: 0 !important; }
}