.fpc-container-e7c3f158 {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	gap: 60px;
	padding: 40px;
}

.fpc-track-wrap-e7c3f158 {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
}

.fpc-track-e7c3f158 {
	display: flex;
	flex-direction: row-reverse;
	gap: 20px;
	transition: transform 0.5s ease;
	will-change: transform;
}

.fpc-item-e7c3f158 {
	flex: 0 0 auto;
	display: block;
	position: relative;
	width: 300px;
	height: 380px;
	overflow: hidden;
}

.fpc-image-e7c3f158 {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.fpc-side-e7c3f158 {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 35px;
	min-width: 200px;
}

.fpc-heading-e7c3f158 {
	margin: 0;
}

.fpc-nav-e7c3f158 {
	display: flex;
	gap: 12px;
}

.fpc-arrow-e7c3f158 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	transition: opacity 0.2s ease;
}

/* Nothing to scroll (loop off at an end, or a short desktop set): script.js disables the arrow. */
.fpc-arrow-e7c3f158[disabled] {
	opacity: 0.35;
	cursor: default;
}

.fpc-arrow-e7c3f158 svg,
.fpc-arrow-e7c3f158 img {
	width: 100%;
	height: 100%;
	display: block;
}

.fpc-button-e7c3f158 {
	text-decoration: none;
	display: inline-block;
}

.fpc-editor-notice-e7c3f158 {
	padding: 20px;
	text-align: center;
	border: 1px dashed #ccc;
}

/*
 * Desktop only (>1024px): short sets fill the track instead of using the
 * fixed Image Width. render() adds .fpc-count-1 / .fpc-count-2 to the root
 * only when exactly 1 or 2 projects resolve; 3 or more get neither class and
 * keep the normal Image Width behaviour.
 *   - 1 item: the item is 100% of the track width.
 *   - 2 items: each item is 50% of the track. flex: 1 1 0 splits the space
 *     left after the Items Gap evenly, so the pair fills the track exactly
 *     instead of overflowing by one gap, as a literal width: 50% would.
 * Both cases size the item through the flex shorthand rather than width.
 * Elementor's generated rule (.elementor-NNN .elementor-element-xxx
 * .fpc-item, four classes) out-ranks any selector we can reasonably write
 * for width, and a plain width: 100% lost to it. A non-auto flex-basis wins
 * over width on the main axis regardless of specificity, so no !important
 * is needed. min-width: 0 stops the image content from forcing a minimum.
 * script.js keeps these short sets static (no scrolling) while this media
 * query matches, and the arrows show as disabled.
 */
@media (min-width: 1025px) {
	.fpc-container-e7c3f158.fpc-count-1-e7c3f158 .fpc-item-e7c3f158 {
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
	}

	.fpc-container-e7c3f158.fpc-count-2-e7c3f158 .fpc-item-e7c3f158 {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

/*
 * Tablet + Mobile: the track runs in normal (non-reversed) document order,
 * the opposite of desktop's row-reverse. On desktop the active item's RIGHT
 * edge pins to the heading side and Next moves items right (see the big
 * comment in script.js). Here Next needs to move items LEFT instead - the
 * familiar "next slide peeks in from the right" pattern - so flipping this
 * one property is enough; script.js reads it back via getComputedStyle at
 * animation time and flips the translateX sign to match, no JS-side
 * breakpoint duplication needed. Pair this with a Tablet/Mobile Image Width
 * set to a % value (e.g. 90%) in the widget's Style > Image controls so the
 * first item fills the container and the next one peeks in at the edge.
 */
@media (max-width: 1024px) {
	.fpc-track-e7c3f158 {
		flex-direction: row;
	}
}

@media (max-width: 767px) {
	.fpc-container-e7c3f158 {
		flex-direction: column;
		align-items: stretch;
	}

	.fpc-side-e7c3f158 {
		order: -1;
		min-width: 0;
	}
}