.post-navigation {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 8%;
	position: relative;
	margin-top: var(--margin);

	[class*="nav-item"] {
		display: grid;
		align-items: center;
		min-width: 0;

		@include media-breakpoint-down (sm) {
			grid-column-gap: 15px
		}

		@include media-breakpoint-up (md) {
			grid-column-gap: 25px;
		}

		&:hover {
			figure:after {
				opacity: 0.85;
			}

			svg {
				opacity: 1;
				transform: translate3d( 0, 0, 0 );
			}
		}
	}

	&.has-thumbnails {

		.nav-item-prev {
			@include media-breakpoint-down (sm) {
				grid-template-columns: 45px 1fr;
			}

			@include media-breakpoint-up (md) {
				grid-template-columns: 70px 1fr;
			}
		}

		.nav-item-next {
			@include media-breakpoint-down (sm) {
				grid-template-columns: 1fr 45px;
			}

			@include media-breakpoint-up (md) {
				grid-template-columns: 1fr 70px;
			}
		}
	}

	.nav-item-prev {
		svg {
			transform: translate3d( 10px, 0, 0 );
		}
	}

	.nav-item-next {
		text-align: right;

		svg {
			transform: translate3d( -10px, 0, 0 );
		}
	}

	figure {
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: 100%;

		&:after {
			content: '';
			z-index: 2;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--paletteColor1);
		}

		svg {
			z-index: 3;
			fill: #fff;
		}

		&:after, svg {
			position: absolute;
			opacity: 0;
			transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}
	}

	.item-content {
		min-width: 0;
	}

	.item-label {
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		opacity: 0.9;

		@include media-breakpoint-down (sm) {
			span {
				display: none;
			}
		}
	}

	.item-title {
		display: block;
		margin: 5px 0 0 0;
		font-size: 14px;
		font-weight: 700;
		color: inherit;

		@include media-breakpoint-down (sm) {
			display: none;
		}
	}

	// divider
	&:after {
		position: absolute;
		content: '';
		top: 25%;
		left: 50%;
		width: 1px;
		height: 50%;
		background: rgba(0, 0, 0, 0.06);
	}
}