.loading-component {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999999999999999;
    transform: translate(-50%, -50%);
}

.spinner {
    --t: 2500ms;
    --animation: rotate var(--t) linear infinite;
    --animation2: scale var(--t) linear infinite alternate;
    position: relative;
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: var(--animation), var(--animation2);
}

.spinner::before,
.spinner::after {
    content: "";
    position: absolute;
}

.spinner::before {
    inset: 0;
    border: 3px solid turquoise;
    border-radius: 50%;
    -webkit-mask-image: conic-gradient(transparent 10%, black);
    mask-image: conic-gradient(transparent 10%, black);
    animation: borderScale var(--t) linear infinite alternate;
}

.spinner::after {
    --r: 0deg;
    /*45deg */
    --scale: 2;
    width: 40%;
    height: 40%;
    /* background:
                radial-gradient(circle at 30% 35%, white 3px, transparent 0),
                radial-gradient(circle at 70% 35%, white 3px, transparent 0),
                radial-gradient(circle at top center, white 6px, transparent 0),
                turquoise; */
    background-image: url('../../images/logo/bunny-icon.png');
    background-size: cover;
    filter: hue-rotate(53deg);
    background-position: 0 0, 0 0, 0 1.25rem;
    top: 0;
    translate: 0 -50%;
    rotate: unset;
    animation: var(--animation) reverse, var(--animation2);
    border-radius: 20%;
}

@keyframes rotate {
    to {
        rotate: calc(360deg + var(--r, 0deg));
    }
}

@keyframes scale {
    to {
        scale: var(--scale, 0.5);
    }
}

@keyframes borderScale {
    to {
        border: 6px solid turquoise;
    }
}

.multi-step-question>.multi-step-question-body {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.multi-step-question-body>.image {
    aspect-ratio: 3/2;
    width: 40%;
    box-sizing: border-box;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.multi-step-question-body>.image>img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}