::root {
    --fac: 1;
}

@media (max-width:1200px) {
     ::root {
        --fac: 1;
    }
}

[class*="hover-area"] {
    z-index: 10;
    position: absolute;
    opacity: 1;
    /* background-color: rgb(0 79 152 50%); */
}

[class*="hover-image-show"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
    left: -200%;
}

.hover-image-show-0-1.active {
    /* top: 268px;
    left: 268px;
    width: 456px;
    height: 237px; */
    top: 27%;
    left: 14.875%;
    width: 25%;
    height: 25%;
}

.hover-image-show-0-2.active {
    top: 1%;
    left: 17.25%;
    width: 16.5%;
    height: 8.5%;
}

.hover-image-show-1.active {
    top: 27.5%;
    left: 34.5%;
    width: 4%;
    height: 4%;
}

.hover-image-show-2-1.active {
    top: 27%;
    left: 29%;
    width: 18%;
    height: 37%;
}

.hover-image-show-2-2.active {
    top: 39%;
    left: 47%;
    width: 24.5%;
    height: 47%;
}

.hover-image-show-2-3.active {
    top: 2.75%;
    left: 63.5%;
    width: 8.5%;
    height: 18%;
}

.hover-image-show-3-1.active {
    top: 4.75%;
    left: 22.75%;
    width: 49%;
    height: 61.75%;
}

.hover-image-show-3-2.active {
    top: 76.25%;
    left: 64.33%;
    width: 7.75%;
    height: 6%;
}

.hover-image-show-4.active {
    top: 58.5%;
    left: 51%;
    width: 21%;
    height: 15.75%;
}

.hover-image-show-5.active {
    top: 2.75%;
    left: 71.75%;
    width: 16.5%;
    height: 96%;
}

[class*="hover-image-show"].active {
    opacity: 0.5;
    z-index: 0;
}


/* slider prod widget */

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.prod-widget-info {
    padding-left: 15%;
    padding-right: 15%;
}


/* cat teaser mobile */

.cat-teaser .row {
    margin-bottom: 1.5rem;
    min-height: 8rem;
}

.cat-teaser .col:first-child {
    max-width: 33.3333%;
}

.cat-teaser .col:last-child {
    max-width: 66.6666%;
}

@media (max-width:639.98px) {
    .cat-teaser.d-flex {
        flex-direction: column;
    }
    .cat-teaser .w-50 {
        width: 100% !important;
    }
}