main {
	.quicklinks {
		--colour: var(--accent-colour, #7399C6);	
		--gap: 1rem;	
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0 var(--gap);
		font-size: 1rem;
		.item {
			break-inside: avoid;
			position: relative;
			color: var(--colour);
			text-align: center;
			&:not(.first) {
				&:before {
					content: '';
					display: block;
					height: 1.5em;
					width: 0.125rem;
					background: var(--colour);
					position: absolute;
					right: calc(100% + var(--gap) / 2);
					top: 50%;
					transform: translate(50%, -50%) skewX(-30deg);
					user-select: none;
				}
			}
			a {
				display: inline-flex;
				padding: .5rem;
				transition: all .3s ease;
				text-decoration: none;
				color: inherit;
				text-transform: uppercase;
				text-decoration: underline;
				text-decoration-thickness: .125em;
				text-underline-offset: .375em;
				text-decoration-color: transparent;
				&:hover {
					text-decoration-color: inherit;
				}
			}

			&.current {
				a {
					font-weight: var(--fw-bold, 700);
					pointer-events: none;
					&:hover {
						text-decoration: none;
					}
				}
			}
		}
	}

	.quicklinks-desktop {
		@media (max-width: 768px) {
			display: none;
		}
	}

	.quicklinks-mobile {
		display: none;
		@media (max-width: 768px) {
			display: block;
		}
	}


	.quicklinks-section {
		padding: 2rem 0;
		margin: 0;

		& + section {
			margin-top: var(--spacing-600);
		}
	}


	.page-nav {
		background: var(--color-brand-primary--500);
		.quicklinks {
			--colour: var(--color-brand-white);
		}
	}
}