.client-grid-container {
    width: 100%;
    height: 100%;
}

.client-grid-wrapper {
    display: grid;
}

.container-image-cg .card-body {
    text-align: center;
}

.container-image-cg .rkit-card-client .image-container-cg {
    position: relative;
    height: 120px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* Gambar Default & Hover */

.clientslogo-image-full-cg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.image-cover,
img.image-cover-hover {
    max-width: 100%;
    min-height: 100%;
    transition: all 0.5s ease;
}


/* Hover content (text) */

.hover-content-cg {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    z-index: 3;
    transition: all 0.5s ease;
    padding: 0;
    font-size: 16px;
}

.hover-title-cg,
.hover-description-cg {
    margin: 0;
    padding: 0;
}


/* Default state */

.clientslogo-image-full-cg.image-hover-cg {
    z-index: 2;
    opacity: 0;
}


/* Default image (z-index lebih rendah) */

.clientslogo-image-full-cg.image-default {
    z-index: 1;
}


/* ----- Horizontal Hover ----- */

.image-container-cg.horizontal .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.horizontal .hover-content-cg {
    transform: translateX(100%);
}

.image-container-cg.horizontal:hover .clientslogo-image-full-cg.image-default {
    transform: translateX(-100%);
    opacity: 0;
}

.image-container-cg.horizontal:hover .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.horizontal:hover .hover-content-cg {
    transform: translateX(0);
    opacity: 1;
}


/* ----- Vertical Hover ----- */

.image-container-cg.vertical .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.vertical .hover-content-cg {
    transform: translateY(100%);
}

.image-container-cg.vertical:hover .clientslogo-image-full-cg.image-default {
    transform: translateY(-100%);
    opacity: 0;
}

.image-container-cg.vertical:hover .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.vertical:hover .hover-content-cg {
    transform: translateY(0);
    opacity: 1;
}

.image-container-cg.flip_effect .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.flip_effect .hover-content-cg {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: all 0.5s ease;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.image-container-cg.flip_effect:hover .clientslogo-image-full-cg.image-hover-cg,
.image-container-cg.flip_effect:hover .hover-content-cg {
    opacity: 1;
    transform: scaleY(1);
}

.image-container-cg.flip_effect .clientslogo-image-full-cg.image-default {
    opacity: 1;
    transform: scaleY(1);
    transition: all 0.5s ease;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.image-container-cg.flip_effect:hover .clientslogo-image-full-cg.image-default {
    opacity: 0;
    transform: scaleY(0);
}