.img-accord-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
}

.img-accord-item {
    flex: 1;
    overflow: hidden;
    position: relative;
    transition: flex-grow 0.5s ease;
    cursor: pointer;
}

.img-accord-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover & Active states handling smooth layout changes */
.img-accord-container:hover .img-accord-item {
    flex-grow: 1 !important;
}

.img-accord-container:hover .img-accord-item:hover {
    flex-grow: 3; /* Overridden dynamically by active_grow_factor control if specified */
}

/* By default first item is active, until first hover */
.img-accord-container:not(:hover) .img-accord-item.is-active {
    flex-grow: 3; /* Matches default active_grow_factor dynamic css if unchanged */
}