.out-of-stock {
    position: relative;
}

.out-of-stock td {
    opacity: 0.2;
}

.out-of-stock::after {
    content: 'Out of Stock';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 16px;
    border-radius: 0px;
    font-weight: bold;
    color: rgb(200, 168, 118);
    font-size: 1.2em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 700px) {

    .out-of-stock {
        opacity: 1;
    }

    .out-of-stock td {
        opacity: 0.2;
    }

    .out-of-stock::after {
        position: static;
        display: block;
        transform: none;
        margin-top: 8px;
        color: rgb(200, 168, 118);
        text-align: center;
        opacity: 1;
        background: transparent;
    }

}