/* =========================================================
   Link shape
   ========================================================= */

.sypn-link-shape {
	--link-shape-height: 64px;
	--link-shape-at: 0.5;
	--link-shape-colour: var(--neutral-white);
	--link-shape-inset: 0px;
	--link-shape-span: min(100% - 2 * var(--link-shape-inset), var(--sypn-content-max));
	--link-shape-run: calc(var(--link-shape-height) * 1.375);
	position: relative;
	flex-shrink: 0;
	box-sizing: content-box;
	height: var(--link-shape-height);
	margin-block: -1px;
	padding-block: 1px;
	background: linear-gradient(var(--link-shape-colour) calc(var(--link-shape-edge, var(--link-shape-joined, 0)) * 1px), var(--link-shape-next, transparent) 0);
}

.sypn-link-shape::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 1px;
	left: var(--link-shape-inset);
	width: calc((100% - 2 * var(--link-shape-inset)) / 2 + (var(--link-shape-at) - 0.5) * var(--link-shape-span) - var(--link-shape-height) * 0.7536 + var(--link-shape-run));
	background: var(--link-shape-colour);
	-webkit-mask:
		linear-gradient(var(--basic-black) 0 0) 0 0 / calc(100% - var(--link-shape-run) + 1px) 100% no-repeat,
		url("../images/link-shape.svg?v=4") 100% calc(1px - var(--link-shape-height) * 6 / 64) / var(--link-shape-run) calc(var(--link-shape-height) * 70 / 64) no-repeat;
	mask:
		linear-gradient(var(--basic-black) 0 0) 0 0 / calc(100% - var(--link-shape-run) + 1px) 100% no-repeat,
		url("../images/link-shape.svg?v=4") 100% calc(1px - var(--link-shape-height) * 6 / 64) / var(--link-shape-run) calc(var(--link-shape-height) * 70 / 64) no-repeat;
}

.sypn-link-shape--25 {
	--link-shape-at: 0.25;
}

.sypn-link-shape--75 {
	--link-shape-at: 0.75;
}

.sypn-link-shape--orange {
	--link-shape-colour: var(--brand-molten-orange);
}

.sypn-link-shape--dark {
	--link-shape-colour: var(--brand-asphalt-black);
}

.sypn-link-shape--grey {
	--link-shape-colour: var(--brand-charcoal-25);
}

.sypn-link-shape--charcoal {
	--link-shape-colour: var(--brand-charcoal-50);
}

.sypn-band {
	display: contents;
}

.umb-block-grid__layout-item.block--linked {
	margin-bottom: calc(-1 * var(--umb-block-grid--row-gap, 0px));
}

@media (max-width: 991.98px) {
	.sypn-link-shape {
		--link-shape-height: 40px;
		--link-shape-at: 0.5;
	}
}

@media (max-width: 767.98px) {
	.sypn-link-shape {
		--link-shape-height: 24px;
	}
}