/**
 * Horizontal scroller
 */

/* container */
.ffs-horizontal-scroller-outer {
	box-sizing: border-box;
	background-color: var(--ffs-bg-light-blue);
	padding-top: var(--ffs-posts-gap);
	padding-bottom: 24px;
	max-width: 100vw;
}
.ffs-horizontal-scroller-outer.ffs-full-page-width {
	margin-left: var(--ffs-negative-margin);
	margin-right: var(--ffs-negative-margin);
}
.ffs-horizontal-scroller-inner {
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-x: scroll;
	scroll-behavior: smooth;
}
.ffs-horizontal-scroller-inner::-webkit-scrollbar {
	display: none;
}
.ffs-horizontal-scroller {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	min-width: 100%;
	column-gap: var(--ffs-posts-gap);
}
.ffs-horizontal-scroller-outer.ffs-full-page-width .ffs-horizontal-scroller {
	padding-left: var(--ffs-posts-gap);
}
.ffs-horizontal-scroller .spacer {
	font-size: 1px;
}
.ffs-horizontal-scroller-item .post-title,
.ffs-horizontal-scroller-item .post-title-link {
	font-size: var(--ffs-large-item-title-size);
	letter-spacing: var(--ffs-large-item-title-letter-spacing);
}
.single-post-link-container.ffs-horizontal-scroller-item .post-content-link {
	-webkit-line-clamp: 2;
    line-clamp: 2;
}

/* controls */
.ffs-horizontal-scroller-controls {
	padding-inline: var(--ffs-posts-gap);
}
.ffs-horizontal-scroller-buttons {
	padding-block: var(--ffs-posts-gap);
}

/* scroll items */
.ffs-horizontal-scroller-item {
	--ffs-first-scroller-item-width: calc(100vw - (var(--ffs-posts-gap) * 2));
	--ffs-scroller-item-width: calc(var(--ffs-first-scroller-item-width) * 9/16);
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: var(--ffs-scroller-item-width);
}
.ffs-horizontal-scroller-item-first {
	flex-basis: var(--ffs-first-scroller-item-width);
}
@media (min-width: 1200px){
	.ffs-horizontal-scroller-item {
		--ffs-first-scroller-item-width: calc(50vw - (var(--ffs-posts-gap) * 3/2));
		--ffs-scroller-item-width: calc(var(--ffs-first-scroller-item-width) * 9/16);
		flex-basis: var(--ffs-scroller-item-width);
		width: var(--ffs-scroller-item-width);
	}
	.ffs-horizontal-scroller-item-first {
		flex-basis: var(--ffs-first-scroller-item-width);
		width: var(--ffs-first-scroller-item-width);
	}
}
@media (max-width: 1199px) and (orientation: portrait) {
	.ffs-horizontal-scroller-item {
		flex-basis: var(--ffs-first-scroller-item-width);
		width: var(--ffs-first-scroller-item-width);
	}
	.ffs-horizontal-scroller-item .media-container {
		aspect-ratio: 16/9;
	}
}