.variant-picker {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: 70vh;
    z-index: 9999;
    background-color: beige;
    transition: all ease .3s;
    opacity: 0;
    pointer-events: none;
}

.variant-picker.visible {
    opacity: 1;
    pointer-events: all;
}

.variant-picker__variants-grid {
    display: flex;
    max-width: 1200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.variant-picker__variants-grid:after {
    content: '';
    display: block;
    clear: both;
}

.variant-card {
    float: left;
    height: 200px;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
}

.variant-card__grid-sizer,
.variant-card {
    width: 20%
}