@keyframes circleSlide {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    100% {
        opacity: 1;
        transform: translate(-15%, -15%);
    }
}

.image-wrapper .inner-wrapper {
  display: inline-block;
  position: relative;
}

.image-wrapper img {
  position: relative;
}

.image-wrapper .inner-wrapper.with-circle:before {
  position: absolute;
  width: var(--circle-size);
  height: var(--circle-size);
  left: 0;
  top: 0;
  z-index: 0;
  content: "";
  background: var(--circle-bg);
  border-radius: 50%;
}

.image-wrapper .inner-wrapper.with-circle.animated:before {
    opacity: 0;
    transform: translate(0, 0);
    animation: circleSlide 1s ease-in-out forwards;
    animation-delay: 0.5s;
}

.image-wrapper .inner-wrapper.with-circle:not(.animated):before {
    opacity: 1;
    transform: translate(-15%, -15%);
}

@media screen and (max-width: 640px) {
    .image-wrapper img {
        max-height: 190px;
    }
    .image-wrapper .inner-wrapper.with-circle:before {
        width: 180px;
        height: 180px;
    }

    .image-wrapper .inner-wrapper.with-circle:not(.animated):before {
        transform: translate(0, -15%);
    }
}