/* ===========================
   Basic layout (carousel container)
=========================== */
.glc-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Track holding all items */
.glc-track {
    display: flex;
    align-items: center;
    will-change: transform;
}

/* ===========================
   Individual items (logo containers)
=========================== */
.glc-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* remove fixed width/height so images scale naturally */
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    position: relative;
}

/* ===========================
   Images inside containers
   Fit dynamically within container, preserve aspect ratio
=========================== */
.glc-item img {
    max-width: 100%;    /* prevent overflow horizontally */
    max-height: 100%;   /* prevent overflow vertically */
    width: auto;        /* maintain natural aspect ratio */
    height: auto;       /* maintain natural aspect ratio */
    object-fit: contain; 
    display: block;
    margin: auto;       /* center smaller logos */
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
                filter 0.3s cubic-bezier(0.4,0,0.2,1),
                opacity 0.3s cubic-bezier(0.4,0,0.2,1);
    -webkit-backface-visibility: hidden;
}

/* ===========================
   Hover visual effects
=========================== */
.hover-grayscale .glc-item img:hover { 
    filter: grayscale(100%); 
}

.hover-scale .glc-item img:hover { 
    transform: scale(1.1); 
}

.hover-opacity .glc-item img:hover { 
    opacity: 0.7; 
}

.hover-none .glc-item img:hover { 
    transform: none; 
    filter: none; 
    opacity: 1; 
}