.details-panel{
	overflow: hidden;
}

.details-panel.is-opening{
	animation: details-open 280ms ease-out both;
}

.details-panel.is-closing{
	animation: details-close 220ms ease-in both;
}

@keyframes details-open{
	from{
		max-height: 0;
		opacity: 0;
		transform: translateY(-0.35em);
	}
	to{
		max-height: 5000px;
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes details-close{
	from{
		max-height: 5000px;
		opacity: 1;
		transform: translateY(0);
	}
	to{
		max-height: 0;
		opacity: 0;
		transform: translateY(-0.35em);
	}
}

@media (prefers-reduced-motion: reduce){
	.details-panel.is-opening,
	.details-panel.is-closing{
		animation-duration: 1ms;
	}
}