.Card {
    background-color: var(--white);
    border: 1px solid var(--gray300);
    border-radius: var(--borderRadius-200);
    transition-property: color,background-color,box-shadow,transform;
    transition-duration: 150ms;
    overflow: hidden;
}

.Card.interactive {
    border: none;
    box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

.Card.interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(50,50,93,.1), 0 8px 15px rgba(0,0,0,.07);
}

.Card.interactive:active {
    transform: translateY(2px);
    box-shadow: 0 11px 20px rgba(50,50,93,.1), 0 6px 11px rgba(0,0,0,.08);
}

.Card {
    background-color: var(--white);
    border: 1px solid var(--gray300);
    border-radius: var(--borderRadius-200);
    transition-property: color,background-color,box-shadow,transform;
    transition-duration: 150ms;
}

.Card.interactive {
    border: none;
    box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

.Card.interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(50,50,93,.1), 0 8px 15px rgba(0,0,0,.07);
}

.Card.interactive:active {
    transform: translateY(2px);
    box-shadow: 0 11px 20px rgba(50,50,93,.1), 0 6px 11px rgba(0,0,0,.08);
}

Remove overflow-hidden from Card so Context can overflow.
Remove overflow-hidden from Card so Context can overflow.
