/*====================================
Accordian Grid
=====================================*/

.accordian-grid {
	padding: 0;
	padding: 0 15px;
	border-bottom: $border-default;
	align-items: flex-start;
	&:after {
		@extend %pseudos;
		right: 30px;
		top: 0;
		height: 100%;
		width: 1px;
		border-right: $border-default;
		background-color: transparent;
		display: none;
	}
	@media screen and (min-width: $bp-tablet) {
		position: relative;
		font-size: 100%;
		border-bottom: 0;
		padding: 0 30px;
		&:after {
			display: block;
		}
	}
}

/*====================================
Accordian Link
=====================================*/

.accordian-link {
	display: block;
	position: relative;
	margin-bottom: 15px;
	> a {
		transition: color .3s;
	}
	&:hover > a {
		color: $red;
	}
}
.accordian-content {
	width: 95%;
	margin-top: 4px;
	height: 0;
	visibility: hidden;
	transition: height .2s .2s, visibility 0s .4s;
}
.accordian-content-inner {
	width: 100%;
	height: 30px;
	opacity: 0;
	transition: opacity .2s;
	@media screen and (min-width: $bp-tablet) {
	    height: 50px;
	}
}
.js-toggle-accordian .accordian-content {
	visibility: visible;
	height: 30px;
	transition: height .2s 0s, visibility 0s 0s;
	@media screen and (min-width: $bp-tablet) {
	    height: 50px;
	}
}
.js-toggle-accordian .accordian-content-inner {
	opacity: 1;
	transition: opacity .2s .2s;
}