.mini_history_img
{
    /* width:100%; */
    height:20vh;

    transition: all .2s ease-in-out;
 
    /*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;
}

.mini_history_img:hover 
{ 
    transform: scale(1.05); 
}

/* MAYBE: Make the border a bit more interesting, maybe with a little triangle and icon? */
.mini_history_img.is-active
{
    border: solid var(--primary);
}

.mini_history_text
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
}

.mini_history_container
{
    position: relative;
    color: white;
}

.mini_history_name
{
    color: var(--secondary-lighter);
}

.mini_history_date
{
    color: var(--secondary-lighter);
}

.mini_history_amount
{
    color: var(--secondary-lighter);
}