.anubis-image-shell {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    line-height: 0;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(145deg, rgba(63, 95, 82, .14), rgba(180, 90, 117, .12))
}

.anubis-image-shell--block {
    display: block;
    width: 100%
}

.anubis-image-shell--large {
    min-height: 180px;
    border-radius: 24px
}

.anubis-image-shell--medium {
    min-height: 120px;
    border-radius: 18px
}

.anubis-image-shell--small {
    min-height: 56px;
    min-width: 56px;
    border-radius: 999px
}

.anubis-image-shell--small,
.anubis-image-shell--small>img {
    width: 56px;
    height: 56px
}

.anubis-image-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%), linear-gradient(145deg, rgba(63, 95, 82, .14), rgba(180, 90, 117, .12));
    background-size: 220% 100%, 100% 100%;
    animation: anubis-image-shell-shimmer 1.4s ease-in-out infinite
}

.anubis-image-shell.is-loaded::before {
    opacity: 0;
    transition: opacity 180ms ease
}

.anubis-image-shell.is-loaded {
    background: transparent
}

.anubis-image-shell.is-loaded.anubis-image-shell--large,
.anubis-image-shell.is-loaded.anubis-image-shell--medium,
.anubis-image-shell.is-loaded.anubis-image-shell--small {
    min-height: 0;
    min-width: 0
}

.anubis-image-shell>img {
    display: block;
    position: relative;
    z-index: 1;
    max-width: 100%;
    transition: opacity 180ms ease
}

.anubis-image-shell--block>img {
    display: block;
    width: 100%
}

.anubis-image-shell:not(.is-loaded)>img {
    opacity: 0
}

.anubis-image-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 58px;
    height: 64px;
    margin: -32px 0 0 -29px;
    pointer-events: none
}

.anubis-image-spinner::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 27px;
    width: 4px;
    height: 28px;
    border-radius: 99px;
    background: #3f5f52
}

.anubis-image-spinner::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 18px;
    width: 23px;
    height: 14px;
    border-radius: 100% 0 100% 0;
    background: #3f5f52;
    transform: rotate(-26deg)
}

.anubis-image-spinner__bloom {
    position: absolute;
    bottom: 18px;
    left: 15px;
    width: 27px;
    height: 27px;
    border-radius: 55% 45% 52% 48%;
    background: #b45a75;
    box-shadow: 10px 3px 0 #c46a85, -6px 6px 0 #9f4965;
    animation: anubis-image-bloom 2s ease-in-out infinite
}

.anubis-image-spinner__leaf {
    position: absolute;
    top: -13px;
    left: 15px;
    width: 11px;
    height: 18px;
    border-radius: 100% 0 100% 0;
    background: #3f5f52;
    opacity: 0;
    transform-origin: 100% 100%;
    animation: anubis-image-leaf-fall 2s ease-in infinite
}

.anubis-image-spinner__leaf--second {
    left: 38px;
    background: #6d8e7e;
    animation-delay: .72s
}

.anubis-image-shell--small .anubis-image-spinner {
    transform: scale(.65)
}

.anubis-image-shell.is-loaded .anubis-image-spinner {
    display: none
}

img.anubis-image-broken {
    opacity: .98
}

@keyframes anubis-image-shell-shimmer {
    0% {
        background-position: 160% 0, 0 0
    }

    100% {
        background-position: -60% 0, 0 0
    }
}

@keyframes anubis-image-leaf-fall {
    0% {
        transform: translate(7px, -6px) rotate(-25deg);
        opacity: 0
    }

    18%,
    72% {
        opacity: 1
    }

    100% {
        transform: translate(-4px, 61px) rotate(250deg);
        opacity: 0
    }
}

@keyframes anubis-image-bloom {

    0%,
    22%,
    100% {
        transform: scale(.86)
    }

    45%,
    74% {
        transform: scale(1.05)
    }
}

@media (prefers-reduced-motion:reduce) {

    .anubis-image-shell::before,
    .anubis-image-spinner__bloom,
    .anubis-image-spinner__leaf {
        animation: none
    }

    .anubis-image-spinner__leaf {
        opacity: 1;
        transform: translate(2px, 28px) rotate(30deg)
    }
}