.news_bubble {
    width: 240px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 20;
    transform-origin: center center;
}

.news_bubble--svg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: visible;
}

.news_bubble.design-a {
    background-color: transparent;
    right: 5rem;
    bottom: 3rem;
    padding: 0.5px 1rem 0.5rem 2rem;
}

.news_bubble.design-b {
    background-color: #3C553E;
    border-radius: 50%;
    right: 64px;
    bottom: -32px;
    padding: 8px 12px;
    overflow: clip;
}

.news_bubble.design-b .news_bubble--svg {
    display: none;
}
.news_bubble.design-a .bubble-path-1 {
    animation: slowmotion-bubble 10s linear infinite;
    transform-origin: center center;
}
.news_bubble.design-a .bubble-path-2 {
    animation: slowmotion-bubble2 15s linear infinite;
    transform-origin: center center;
}

.news_bubble--title {
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    text-align: center;
    position: relative;
    z-index: 1;
}

.news_bubble--img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.news_bubble--img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}



@media screen and (max-width: 1940px) {
    .news_bubble.design-a {
        right: 4rem;
        bottom: -5rem;
    }
}

@media screen and (max-width: 1480px) {
    .news_bubble.design-a {
        right: 4rem;
        bottom: -4rem;
    }
}

@media screen and (max-width: 1280px) {
    .news_bubble {
        transform: scale(0.9);
        transform-origin: bottom right;
    }
}

@media screen and (max-width: 992px) {
    .news_bubble {
        transform: scale(0.9);
        transform-origin: bottom right;
    }
}

@media screen and (max-width: 767px) {
    .news_bubble {
        transform: scale(0.8);
        transform-origin: bottom right;
    }
    .news_bubble.design-a {
        right: 2rem;
        bottom: -5rem;
    }    
}

@media screen and (max-width: 575px) {
    .news_bubble {
        transform: scale(0.65);
        transform-origin: bottom right;
    }
    .news_bubble.design-b {
        bottom: -2rem;
        right: 1rem;
    }
    .news_bubble.design-a {
        right: 2rem;
        bottom: -3rem;
    }
}

@keyframes slowmotion-bubble { 
    0%   {transform: rotate(0deg) translate(0,0);}
    25%  {transform: rotate(90deg) translate(5px, 5px);}
    25%  {transform: rotate(20deg) translate(0px, 0px);}
    75%  {transform: rotate(-20deg) translate(-6px, 0px);}
    100% {transform: rotate(0deg) translate(0,0);}
  }

@keyframes slowmotion-bubble2 { 
    0%   {transform: rotate(0deg) translate(0,0);}
    25%  {transform: rotate(-10deg) translate(0px, 0px);}
    25%  {transform: rotate(-20deg) translate(0px, 5px);}
    75%  {transform: rotate(-10deg) translate(0px, -5px);}
    100% {transform: rotate(0deg) translate(0,0);}
  }