.product-pictures {
    display: flex;
    flex-wrap: wrap;
}
.product-pictures div {
    margin-right: 10px;
}
.pictures {
    width: 84px;
}
.pictures img{
    margin-bottom: 6px;
}
.picture {
    position: relative;
    width: calc(100% - 104px);
    height: auto;
}
img {
    width: 100%;
}
.img-active {
    border: 1px solid #1cb7cf;
}
.rect {
    position: absolute;
    margin: 0px !important;
    padding: 0;
    width: 200px;
    height: 150px;
    background-color: #78787c4d;
    transform: translate(-50%, -50%);
    pointer-events: none;
    visibility: hidden;
}
.zoom {
    position: absolute;
    left: 680px;
    visibility: hidden;
    z-index: 9;
}
.rect-active {
    visibility: visible
}
@media (max-width: 1480px) {
    .zoom {
        left: 610px;
        max-width: 590px;
    } 
}
@media (max-width: 1200px) {
    .zoom {
        left: 494px;
        max-width: 450px;
    }
}
@media (max-width: 992px) {
    .zoom {
        left: 366px;
        max-width: 360px;
    }
}
@media (max-width: 768px) {
    .pictures {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .product-pictures {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;align-items: center;
    }
    .pictures img {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 20%;
                flex: 0 1 20%;
        max-width: 20%;
    }
    .zoom {
        display: none;
    }
}