.ly-related {
	--ly-ink: #1b2c46;
	--ly-muted: #4f5964;
	--ly-line: #d8d0c4;
	--ly-paper: #f5f2ec;
	--ly-accent: #866a47;
	--ly-desktop: 3;
	container-type: inline-size;
	margin: clamp(2.75rem, 6vw, 4.5rem) auto 1.75rem;
	max-width: 70rem;
	padding-block: 1.9rem .4rem;
	border-top: 1px solid var(--ly-line);
	color: var(--ly-ink);
}

.ly-related--4 {
	--ly-desktop: 4;
}

[data-ly-services] {
	max-width: min(70rem, calc(100% - 2rem));
}

.ly-related__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.35rem;
}

.ly-related .ly-related__eyebrow {
	margin: 0 0 .45rem;
	color: var(--ly-accent);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ly-related .ly-related__header h2 {
	margin: 0;
	color: var(--ly-ink);
	font-size: clamp(1.3rem, 3.5vw, 1.8rem);
	font-weight: 400;
	line-height: 1.2;
	text-align: start;
	text-transform: none;
}

.ly-related__controls {
	display: flex;
	flex: none;
	gap: .4rem;
}

.ly-related__controls[hidden] {
	display: none;
}

.ly-related .ly-related__arrow {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ly-line);
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	color: var(--ly-ink);
	cursor: pointer;
}

.ly-related .ly-related__arrow:not(:disabled):hover {
	border-color: var(--ly-ink);
	background: var(--ly-ink);
	color: #fff;
}

.ly-related .ly-related__arrow:disabled {
	opacity: .42;
	cursor: default;
}

.ly-related__arrow svg {
	width: 1.15rem;
	height: 1.15rem;
}

.ly-related .ly-related__track {
	--ly-gap: 1.1rem;
	--ly-visible: var(--ly-desktop);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--ly-visible) - 1) * var(--ly-gap)) / var(--ly-visible));
	gap: var(--ly-gap);
	margin: 0;
	padding: 0 0 .85rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-color: #b5a692 transparent;
	scrollbar-width: thin;
}

.ly-related .ly-related__item {
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.ly-related .ly-related__card {
	display: flex;
	height: 100%;
	flex-direction: column;
	background: var(--ly-paper);
	color: var(--ly-ink);
	text-decoration: none;
}

.ly-related__photo {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #ece7dd;
}

.ly-related .ly-related__photo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .3s ease;
}

.ly-related__card:hover .ly-related__photo img {
	transform: scale(1.025);
}

.ly-related__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.05rem 1.1rem 1.15rem;
}

.ly-related .ly-related__body h3 {
	margin: 0 0 .5rem;
	color: var(--ly-ink);
	font-size: 1.075rem;
	font-weight: 500;
	line-height: 1.32;
	text-align: start;
	text-transform: none;
}

.ly-related .ly-related__body p {
	margin: 0 0 .95rem;
	color: var(--ly-muted);
	font-size: .875rem;
	line-height: 1.55;
	text-align: start;
}

.ly-related__read {
	margin-top: auto;
	color: var(--ly-ink);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .075em;
	text-transform: uppercase;
}

.ly-related__read span {
	margin-inline-start: .3em;
}

.ly-related__card:hover .ly-related__read {
	text-decoration: underline;
	text-underline-offset: .25em;
}

.ly-related :is(.ly-related__card, .ly-related__track, .ly-related__arrow):focus-visible {
	outline: 2px solid var(--ly-ink);
	outline-offset: -2px;
}

@container (max-width: 790px) {
	.ly-related .ly-related__track {
		--ly-visible: 2;
	}
}

@container (max-width: 510px) {
	.ly-related .ly-related__track {
		--ly-gap: .8rem;
		--ly-visible: 1.16;
	}

	.ly-related .ly-related__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ly-related .ly-related__photo img {
		transition: none;
	}
}
