.jug-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    text-align: center;
    flex-direction: column;
    margin: 0.5rem auto;
}

.jug-item {
    border-width: 1px;
    border-color: white;
    border-style: dotted;
    box-sizing: border-box;
}

.jug-name {
    flex: 0 0 1;
    max-width: 100%;
}


.jug-tricks{
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
    flex-direction: column;
    flex: 0 0 1;
    max-width: 100%;
}

.yes {
    background-color: var(--color-yes);
}

.no {
    background-color: var(--color-no);
}

@media(min-width: 768px) {
    .jug-row {
        flex-direction: row;
        margin: 0.3rem auto;
    }

    .jug-name {
        flex: 0 0 41.6667%;
        max-width: 41.6667%;
    }

    .jug-tricks{
        flex: 1 0 1;
        max-width: 100%;
        flex-direction: row;
        width: 100%;

    }

    .jug-item{
        width: 100%;
    }
}