.mk-sim-preview{
    position:relative;
    width:100%;
    max-width:650px;
    margin:0 auto;
}

.mk-sim-car{
    width:100%;
    height:auto;
    display:block;
    position:relative;
    z-index:1;
}

/* =========================================
   WHEEL
========================================= */

.mk-sim-wheel{
    position:absolute;

    left:var(--x);
    top:var(--y);

    width:var(--size);
    aspect-ratio:1 / 1;
    height:auto;

    transform:
        translate(-50%, -50%)
        scaleX(var(--scale-x))
        scaleY(var(--scale-y))
        rotate(var(--rotate))
        skewX(var(--skew-x));

    pointer-events:none;
    z-index:5;
    opacity:0;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

/* =========================================
   ACTIVE
========================================= */

.mk-sim-preview.has-rims .mk-sim-wheel{
    opacity:1;
}

/* =========================================
   BACKPLATE
========================================= */

.mk-sim-backplate{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    z-index:1;

    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

/* =========================================
   RIM
========================================= */

.mk-sim-rim{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    z-index:2;

    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;

    opacity:0;

    transition:opacity .2s ease;
}

.mk-sim-rim.active{
    opacity:1;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:900px){

    .mk-sim-preview{
        max-width:100%;
    }

}