.breadcrumbs {
	color: $co-gray-40;

	&-container {
		padding: $sp-5 0 $sp-2;
		min-height: 72px;
		margin-bottom:  $sp-lg-1;
	}

	> li {
		margin-right: $sp-2;
		&:not(:first-child):before {
			content:"";
			display: inline-block;
			width: 10px;
			height: 1px;
			margin-right: $sp-2;
			border-bottom: 1px solid $co-gray-60;
			transform: translateY(-4px);
		}
		> a,
		> span {
			display: inline-block;
			padding: $sp-2 0;
			color: $co-gray-40;
		}
		> a:not(.is-active) {
			text-decoration: none;
			@include hover() {
				color: $text-color;
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}
		}
	}
}


@include mediaQ(sm) {
	body:not(.has-banner) .breadcrumbs {
		padding-left: 230px;
	}
}