/************************************************************************************************/
/* AMICI INFINITE GALLERY WIDGET                                                                */
/************************************************************************************************/

.ags-widget {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ags-track-gap, 16px);
	width: 100%;
}

/************************************************************************************************/
/* TRACKS                                                                                       */
/************************************************************************************************/

.ags-track {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.ags-track--row {
	flex-basis: 100%;
	width: 100%;
	height: var(--ags-height, 220px);
}

.ags-track--column {
	flex: 1;
	min-width: 150px;
	height: var(--ags-height, 220px);
}

/************************************************************************************************/
/* REEL                                                                                         */
/************************************************************************************************/

.ags-reel {
	display: flex;
	align-items: stretch;
	height: 100%;
	width: max-content;
	will-change: transform;
}

.ags-track--column .ags-reel {
	flex-direction: column;
	width: 100%;
	height: max-content;
}

/************************************************************************************************/
/* ITEMS                                                                                        */
/************************************************************************************************/

.ags-item {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--ags-radius, 0px);
	margin-right: var(--ags-gap, 12px);
}

.ags-track--column .ags-item {
	margin-right: 0;
	margin-bottom: var(--ags-gap, 12px);
	width: 100%;
}

.ags-item img {
	display: block;
	height: var(--ags-height, 220px);
	width: auto;
	object-fit: var(--ags-fit, cover);
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	border-radius: var(--ags-radius, 0px);
}

.ags-track--column .ags-item img {
	height: auto;
	width: 100%;
}

/************************************************************************************************/
/* ANIMATIONS                                                                                   */
/************************************************************************************************/

@keyframes ags-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes ags-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }
@keyframes ags-up    { from { transform: translateY(0);    } to { transform: translateY(-50%); } }
@keyframes ags-down  { from { transform: translateY(-50%); } to { transform: translateY(0);    } }

/************************************************************************************************/
/* FADE EDGES (CSS mask — works on any background)                                              */
/************************************************************************************************/

.ags-track--row.ags-fade-edges {
	-webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
	mask-image:         linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}

.ags-track--column.ags-fade-edges {
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 60px, black calc(100% - 60px), transparent);
	mask-image:         linear-gradient(to bottom, transparent, black 60px, black calc(100% - 60px), transparent);
}

/************************************************************************************************/
/* GRAYSCALE EFFECT                                                                             */
/************************************************************************************************/

.ags-grayscale .ags-item img {
	filter: grayscale(100%);
	transition: filter 0.4s ease;
}

.ags-grayscale .ags-item:hover img {
	filter: grayscale(0%);
}

/************************************************************************************************/
/* SCALE ON HOVER                                                                               */
/************************************************************************************************/

.ags-scale-hover .ags-item img {
	transition: transform 0.4s ease;
}

.ags-scale-hover .ags-item:hover img {
	transform: scale(1.08);
}

.ags-grayscale.ags-scale-hover .ags-item img {
	transition: filter 0.4s ease, transform 0.4s ease;
}