.ct-container {
    display: flex;
    width: 100%;
    height: 60vh;
    gap: 10px;
}

.ct-image-box {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    position: relative;
    transition: all 0.5s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    filter: grayscale(100%); /* Default grayscale effect */
}

/* Remove grayscale effect when image is active (clicked) */
.ct-image-box.ct-active {
    flex: 6; /* Adjust the expansion size as needed */
    transform: scale(1.05); /* Slight zoom effect when active */
    filter: grayscale(0%); /* Remove grayscale effect */
}

.ct-image-box .ct-content {
    background: rgb(12 96 120 / 60%);
    color: #fff;
    padding: 31px;
    width: 58%;
    transition: all 0.3s ease;
    margin-left: 21%;
}

/* Hide content on inactive boxes */
.ct-image-box:not(.ct-active) .ct-content {
    opacity: 0;
}

/* Make the background image fully visible in the active box */
.ct-image-box.ct-active {
    background-size: contain; /* Ensures the whole image fits */
}