/* ─────────────────────────────────────────
   Image Marquee – image-marquee.css
   ───────────────────────────────────────── */

/* Wrapper: hides overflow so cards clip cleanly */
.im-wrap {
    overflow: hidden;
    width: 100%;
    padding: 1.5rem 0;
    position: relative;
}

.im-wrap::before,
.im-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    pointer-events: none;
}

.im-wrap::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.im-wrap::after {
    right: 0;
	background: linear-gradient(to left, #ffffff 0%, transparent 100%);align-content;
}

/* Track: all cards in a single infinite row */
.im-track {
    display: flex;
    width: max-content;
    gap: var(--im-gap, 16px);
    animation: im-scroll var(--im-speed, 28s) linear infinite;
}

/* Individual card */
.im-item {
/*     flex: 0 0 auto; */
	display:flex;
    /* Desktop default: 6 visible items
       Formula: (100vw - scrollbar ~17px - gap * 5) / 6
       Using CSS custom props from the shortcode wrapper          */
    width: calc( (100vw - 17px - var(--im-gap, 16px) * 5) / 6 );
    min-width: 130px;
    max-width: 220px;
	align-items:center;
	height:fit-content;
    aspect-ratio: var(--im-aspect, 4/3);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
	padding:4px 6px;
}

/* Image: default grayscale, full color on hover */
.im-item img {
    width: 100%;
    height: 100%;
	object-fit: contain;
	display: block;
	aspect-ratio: 2 / 1;
	max-height: 60px;
    display: block;
	opacity:0.6;

    filter: grayscale(1) brightness(0.88);
    transition: filter 0.42s ease, transform 0.42s ease ;
    transition: opacity 0.42s ease, transform 0.42s ease ;
}

.im-item:hover img {
    filter: grayscale(0) brightness(1);
		opacity:1;
}

/* Keyframes – scroll exactly half (duplicated list) */
@keyframes im-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Responsive breakpoints ── */

/* Tablet: 4 items */
@media (max-width: 900px) {
    .im-item {
        width: calc( (100vw - 17px - var(--im-gap, 16px) * 3) / 4 );
        min-width: 110px;
    }
}

/* Large mobile: 3 items */
@media (max-width: 600px) {
    .im-item {
        width: calc( (100vw - var(--im-gap, 16px) * 2) / 3 );
        min-width: 90px;
    }
	.im-wrap::before,
	.im-wrap::after {
		width: 100px;
	}
}

/* Small mobile: 2 items */
@media (max-width: 400px) {
    .im-item {
        width: calc( (100vw - var(--im-gap, 16px)) / 2 );
        min-width: 120px;
    }
		.im-wrap::before,
		.im-wrap::after {
			width: 80px;
		}
}