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

.ACCORDION .row {
	border-radius: 10rem;
	overflow: hidden;
}

[data-style].ACCORDION .row { background-color: var(--teal-bg); }

.ACCORDION .heading {
	margin: 0;
	position: relative;
	padding: 50rem 	100rem 50rem 60rem;
	transition: color 0.25s;
}

.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,
.ACCORDION .toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 60rem;
	transform: translate(0, -50%);
	width: 40rem;
	height: 40rem;
	transition: opacity 0.25s ease-out;
}

.ACCORDION .toggle::before { background: url('./images/open-btn.svg') no-repeat center / contain; opacity: 1; }
.ACCORDION .toggle::after { background: url('./images/close-btn.svg') no-repeat center / contain; opacity: 0; }


.ACCORDION .container {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height  0.25s, margin-top 0.25s, opacity 0.15s ease-out;
}

.ACCORDION .content {
	padding: 0 60rem 50rem;
}

.ACCORDION .row.alt-active .toggle {width: 40rem;}
.ACCORDION .rows.alt-singular .row.alt-active .toggle {display: none;}

.ACCORDION .row.alt-active .toggle { height: 40rem; width: 40rem; top: 50%; right: 60rem; transform: translate(0, -50%);}
.ACCORDION .row.alt-active .toggle::before { top: 0; right: 0; opacity: 0; transform: translate(0, 0); }
.ACCORDION .row.alt-active .toggle::after { top: 0; right: 0; opacity: 1; transform: translate(0, 0); }
.ACCORDION .row.alt-active .container {
	opacity: 1;
	margin-top: -25rem;
	transition: max-height 0.25s, margin-top 0.25s, opacity 0.15s ease-out;
}

@media screen and (max-width: 960px) {
	.ACCORDION .row:not(:last-child) { margin-bottom: 20rem; }
	.ACCORDION .heading { padding: 25rem 50rem 25rem 20rem; }
	.ACCORDION .toggle::before,
	.ACCORDION .toggle::after { right: 20rem; width: 30rem; height: 30rem; }
	.ACCORDION .row.alt-active .toggle { right: 20rem; width: 30rem; height: 30rem; }
	.ACCORDION .container { transition: max-height  0.25s, opacity 0.15s ease-out; }
	.ACCORDION .row.alt-active .container { margin-top: 0; transition: max-height 0.25s, opacity 0.15s ease-out; }
	.ACCORDION .content { padding: 0 20rem 25rem; }
}



/* image */

.ACCORDION[data-style="image"] .rows {
	position: relative;
	padding: 0 800rem 0 0;
}

.ACCORDION[data-style="image"] .image {
	overflow: hidden;
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	width: 760rem;
	transition: opacity 0.25s;
}

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

@media screen and (max-width: 960px) {
	.ACCORDION[data-style="image"] .rows {min-height: 0 !important; padding: 0;}
	.ACCORDION[data-style="image"] .image {position:static; width:auto; padding: 0 20rem 20rem;}
}