.post-navigation {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	// margin-top: 80px;
	// margin-bottom: 150px;
	margin-top: var(--postNavSpacing);

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

		&:hover {
			figure > span {
				opacity: 0.85;

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

	.nav-item-prev {
		padding-right: 7%;

		figure {
			margin-right: 15px;

			@include media-breakpoint-up (md) {
				margin-right: 25px;
			}

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

	.nav-item-next {
		flex-direction: row-reverse;
		padding-left: 7%;

		figure {
			margin-left: 15px;

			@include media-breakpoint-up (md) {
				margin-left: 25px;
			}

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

		.item-content {
			text-align: right;
		}

		.item-title {
			text-align: right;
		}
	}


	figure {
		align-self: center;
		overflow: hidden;
		position: relative;
		border-radius: 100%;

		@include media-breakpoint-down (sm) {
			flex: 0 0 45px;
			max-width: 45px;
		}

		@include media-breakpoint-up (md) {
			flex: 0 0 70px;
			max-width: 70px;
		}

		> span {
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			border-radius: inherit;
			background: var(--linkHoverColor);
			transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

			svg {
				fill: #fff;
				transition: transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
			}
		}
	}

	.item-content {
		min-width: 0;

		> span {
			font-size: 12px;
			font-weight: 600;
			text-transform: uppercase;
			opacity: 0.9;
			color: var(--fontColor);

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

	.item-title {
		margin: 10px 0 0 0;
		font-size: 14px;
		word-wrap: break-word;

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

	// divider
	a.nav-item-prev {
		position: relative;

		&:after {
			position: absolute;
			content: '';
			top: 25%;
			right: 0;
			width: 1px;
			height: 50%;
			background: rgba(215, 222, 229, 0.5);
		}
	}
}