.quick-links {
	--link-color: var(--white);
	--link-color-hover: var(--white);

	display: flex;
	flex-direction: column;
	gap: 20px;
}

.panel-header .top .quick-links {
	display: none;
}

.quick-links .link {
	font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--link-color);
    display: flex;
	gap: 14px;
}

.quick-links .link:not(.vguide, .specials, .webcam) {
	margin-left: 34px;
}

.quick-links .link.vguide::before {
	content: url(/includes/public/assets/shared/icon-visitors_guide.svg);
	width: 19px;
}

.quick-links .link.specials::before {
	content: url(/includes/public/assets/shared/icon-specials.svg);
	width: 20px;
}

.quick-links .link.webcam::before {
	content: url(/includes/public/assets/shared/icon-webcams.svg);
	width: 17px;
}
@media (hover: hover) {
	.quick-links .link:hover {
		color: var(--link-color-hover);
	}
}

@media (min-width: 64em) {
	.panel-header .top .quick-links {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 26px;
	}

	.quick-links .link {
		font-size: var(--text-sm);
		gap: 8px;
	}
	.quick-links .link:not(.vguide, .specials, .webcam) {
		margin-left: unset;
	}
	
	.quick-links .link.specials {
		gap: 5px;
	}
	.quick-links .link.specials::before {
		margin-left: 6px;
	}
	
	.quick-links .link.webcam::before {
		margin-left: 5px;
	}
}