.ACCORDION {
	transition: min-height 0.25s;
}

.ACCORDION .row {
	border-bottom: 1px solid var(--midnight-60);
}

.ACCORDION .row:first-child {
	border-top: 1px solid var(--midnight-60);
}

.ACCORDION .heading {
	z-index: 1;
	margin: 0;
	position: relative;
	background: transparent;
	padding: var(--s5) var(--s6) var(--s5) 0;
	transition: color 0.25s;
	color: var(--midnight-60);
}

.ACCORDION .toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	text-indent: -9999rem;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: none;
}

.ACCORDION .toggle::before {
	content: '';
	position: absolute;
	top: var(--s5);
	right: 0;
	width: var(--s5);
	height: var(--s5);
	background: no-repeat center url(../../assets/images/ui-accordion-open.svg);
	background-size: contain;
}

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

.ACCORDION .content {
	position: relative;
	padding: 0 0 var(--s5);
	z-index: 1;
}

.ACCORDION .row.alt-active .toggle {width: var(--s3);}
.ACCORDION .rows.alt-singular .row.alt-active .toggle {display: none;}
.ACCORDION .row.alt-active .toggle::before {background: no-repeat center url(../../assets/images/ui-accordion-close.svg);}
.ACCORDION .row.alt-active  .heading {color: var(--white);}

@media screen and (max-width: 960px) {
	.ACCORDION .toggle::before {top: var(--s3);right: 4rem;}
	.ACCORDION .heading {padding: var(--s3) var(--s6) var(--s3) 0;}
	.ACCORDION .content {padding: 0 0 var(--s3);}
}



/* image */

.ACCORDION[data-variant="image"] {
	position: relative;
	display: flex;
	justify-content: space-between;
}

.ACCORDION[data-variant="image"] .rows {
	width: calc(33.333333% - 5rem);
	box-sizing: border-box;
	padding-right: var(--s3);
}

.ACCORDION[data-variant="image"] .image {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	width: calc(66.666666% + 5rem);
	box-sizing: border-box;
	padding-left: var(--s6);
	transition: opacity 0.25s;
}

.ACCORDION[data-variant="image"] .spacer {
	width: calc(66.666666% + 5rem);
	padding-left: var(--s6);
	box-sizing: border-box;
	opacity: 0;
}

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

@media screen and (max-width: 960px) {
	.ACCORDION[data-variant="image"] {display: block;}
	.ACCORDION[data-variant="image"] .rows {min-height: 0 !important; width: auto; padding-right: 0;}
	.ACCORDION[data-variant="image"] .image {position:static; width:auto; padding: 0;}
	.ACCORDION[data-variant="image"] .spacer {display: none;}
}