.breadcrumbs {
	display: inline-block;
	margin-bottom: $spacing-sm;
	@include typescale('2xs');
	text-transform: lowercase;
	border-radius: $border-radius-sm;

	@media (min-width: $breakpoint-largescreen-typography) {
		@include typescale('3xs');
	}

	a {
		color: $grey--dark;
		margin-right: 0.5em;
		text-decoration: underline;
		text-decoration-color: rgba($grey--dark, 0.7);
		text-decoration-thickness: 1px;
	}

	ul {
		margin: 0;
	}

	li {
		display: inline;

		&::after {
			content: '';
			position: relative;
			top: 0.1em;
			display: inline-block;
			height: 1em;
			width: 0.5em;
			border-left: 2px solid $secondary;
			transform: skew(-20deg);
		}
	}
}