#basket-modal {
    position: fixed;
    z-index: 1030;
    width: 100%;
    height: 100%;
    background: none;
    transition: all 0.5s ease;
    pointer-events: none;
    --width: calc(min(500px,100%))
}

    #basket-modal.active {
        background-color: rgba(0,0,0,0.5);
        pointer-events: auto;
    }

    #basket-modal > *:first-child {
        position: absolute;
        left: 100%;
        right: calc(100% + var(--width));
        width: var(--width);
        height: 100%;
        background-color: white;
        transition: all 0.5s ease;
    }

    #basket-modal.active > *:first-child {
        left: calc(100% - var(--width));
        right: 0;
    }

    #basket-modal :is(h1,h2,h3,h4,h5,h6) {
        color: #e33baa;
        font-size: 52px;
        font-weight: 800;
        font-style: italic;
        text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white, 0 -2px 0 white, 0 2px 0 white, -2px 0 0 white, 2px 0 0 white;
        text-align: center;
        text-transform: uppercase;
        margin-bottom:-1rem;
    }

    #basket-modal .comp-link {
        background-size: cover;
        aspect-ratio: 1.6;
        display: block;
        border-radius: 5px;
        box-shadow: 3px 3px 3px #8b8997;
    }

#basket-modal-body {
    box-shadow: 0 0 3px inset rgba(0,0,0,0.2);
    /*border-radius: 14px 0 0 14px;*/
}