.speech-bubble-clip {
    position: relative;
    max-width: 100%;
    height: auto;
}

.speech-bubble-clip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add green overlay */
.speech-bubble-clip::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: normal;
}

.bubble-green img {
    mask-image: url("/img/green-clip.svg");
}

/* Add green overlay */
.bubble-green::after {
    background-color: #8cc63f;
    mask-image: url("/img/green-blob.svg");
}

.bubble-blue img {
    mask-image: url("/img/blue-clip.svg");
}

/* Add blue overlay */
.bubble-blue::after {
    background-color: #009fe3;
    mask-image: url("/img/blue-blob.svg");
}

.bubble-yellow img {
    mask-image: url("/img/yellow-clip.svg");
}

/* Add yellow overlay */
.bubble-yellow::after {
    background-color: #f7d114;
    mask-image: url("/img/yellow-blob.svg");
}

.bubble-red img {
    mask-image: url("/img/red-clip.svg");
}

/* Add red overlay */
.bubble-red::after {
    background-color: #d4145a;
    mask-image: url("/img/red-blob.svg");
}