@media screen {

    .main__products {
        background: white;
        border-radius: 0;
        border-top: 1px solid lightgray;
        font-size: 14px;
        height: 75vh;
        padding: 2vh 0 29vh 0;

        /* Smooth scrolling; has to be scroll, not auto */
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .main__products__product__line {
        border-bottom: 1px solid lightgray;
        margin: 1vh 0 1vh 7vh;
        width: 33vh;
    }

    .main__products__product__productItem__contentKey,
    .main__products__product__productItem__contentValue {
        padding: 0.1em 0em;
    }

    .main__products__product__productItem__contentKey {
        color: gray;
    }

    .main__products__product__productItem__contentValue {
        outline: 0 none;
        border: 0 none;
    }

    .main__products__product__productItem__contentValue--milk {
        color: var(--blue_dark);
    }

    .main__products__product__productItem__contentValue--parve {
        color: var(--dark-grey);
    }

    .main__products__product__productItem__contentValue--treif {
        color: crimson;
    }

    .main__products__product__productItem__contentValue--product {
        font-weight: bold;
    }

    /* grid layout */
    @supports (display: grid) {
        .main__products__product__productItem {
            display: grid;
            grid-template-columns: 6em auto;
            grid-gap: 0.6em;
            grid-auto-flow: dense;
        }

        .main__products__product__productItem__contentKey {
            grid-column: 1;
            justify-self: end;
        }

        .main__products__product__productItem__contentValue {
            grid-column: 2;
        }
    }
}


/* 
 * https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */
@media only screen and (max-device-width : 812px) {
    .main__products {
        padding-bottom: 30vh;

        /* Prevent the list from wiggle horizontally */
        overflow-x: hidden;
    }
}