.gradient-image-holder {
    display: block;
    position: relative;
    overflow: visible;
}

.gradient-image-holder::before,
.gradient-image-holder::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
    z-index: -1;
}

.gradient-image-holder::before {
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(201, 169, 252, 1) 0%, rgba(201, 169, 252, 0) 100%);
    animation: blobPurple 100s ease-in-out infinite;
}

.gradient-image-holder::after {
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(240, 180, 222, 1) 0%, rgba(240, 180, 222, 0) 100%);
    animation: blobPink 120s ease-in-out infinite;
}

@media (min-width: 768px) {
    .gradient-image-holder::before,
    .gradient-image-holder::after {
        filter: blur(80px);
    }

    .gradient-image-holder::before {
        width: 80%;
        height: 80%;
    }

    .gradient-image-holder::after {
        width: 80%;
        height: 80%;
    }
}

@media (min-width: 992px) {
    .gradient-image-holder {
        overflow: visible;
    }
}

@media (min-width: 1200px) {

    .gradient-image-holder::before,
    .gradient-image-holder::after {
        filter: blur(150px);
    }

}

.gradient-image-holder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gradient-image-holder img {
    width: clamp(280px, 40vw, 540px);
    height: clamp(340px, 40vw, 640px);
    object-fit: cover;
}