.ACCORDION {
	margin: 0 auto;
	max-width: var(--col-10);
	transition: min-height 0.25s;
}

.ACCORDION .row {
	border-radius: 16rem;
	overflow: hidden;
	transition: background-color 0.25s, box-shadow 0.25s;
}

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

.ACCORDION .heading {
	z-index: 1;
	margin: 0;
	position: relative;
	background: var(--green);
	padding: 32rem 96rem 32rem 32rem;
	transition: color 0.25s, background-color 0.25s;
	border-radius: 16rem;
}

.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;
	color: inherit;
}

.ACCORDION .toggle::before {
	content: '';
	position: absolute;
	top: 26rem;
	right: 32rem;
	width: 48rem;
	height: 48rem;
	border: 2rem solid currentColor;
	box-sizing: border-box;
	background: url(ui-expand.svg) no-repeat center / 100%;
}

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

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

.ACCORDION .content p:last-child .b-button {
	margin-top: 16rem;
}

.ACCORDION .row:hover,
.ACCORDION .row.alt-active {background: var(--white); border-color: var(--light-green);}

.ACCORDION .row:hover .heading,
.ACCORDION .row.alt-active .heading {background-color: transparent; color: var(--navy);}

.ACCORDION .row.alt-active .toggle {pointer-events: none;}
.ACCORDION .row.alt-active .toggle::before {pointer-events: all; background-image: url(ui-collapse.svg);}

@media screen and (max-width: 960px) {
	.ACCORDION .row:not(:last-child) {margin-bottom: 24rem;}
	.ACCORDION .heading {padding: 24rem 64rem 24rem 24rem;}
	.ACCORDION .content {padding: 0 24rem 24rem;}
	.ACCORDION .toggle::before {transform: scale(0.666666) translate(32rem, -22rem);}
}



/* GREEN */

.ACCORDION[data-variant="1"] .heading {background-color: var(--dark-navy); color: var(--white);}
.ACCORDION[data-variant="1"] .row:hover .heading {background-color: var(--navy); color: var(--white);}
.ACCORDION[data-variant="1"] .toggle::before {background-image: url(ui-expand-alt.svg);}
.ACCORDION[data-variant="1"] .row.alt-active {box-shadow: inset 0 0 0 2rem var(--dark-navy);}
.ACCORDION[data-variant="1"] .row.alt-active .heading {background-color: transparent; color: var(--dark-navy);}



/* HAS POINTS */

.ACCORDION[data-points] {max-width: none;}
.ACCORDION[data-points] .points {list-style: none; padding: 0;}
.ACCORDION[data-points] .points > li {margin: 32rem 0;}
.ACCORDION[data-points] .points .image {width: 24rem; float: left; margin: 1rem 8rem 0 0;}
.ACCORDION[data-points] .points a {font-weight: 600; overflow: hidden;}
.ACCORDION[data-points] .points a svg {width: 24rem; height: 16rem; display: inline-block; vertical-align: middle; margin: 0 0 0 4rem;}
.ACCORDION[data-points] .points span {display: block; clear: left; padding-top: 8rem;}

@media screen and (max-width: 960px) {
	.ACCORDION[data-points] .points {padding-top: 8rem;}
	.ACCORDION[data-points] .points > li {margin: 16rem 0;}
}