/* image switch hover */
 .hvr__images {position: relative; height: 100%; } .hvr__sectors {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -ms-flexbox; display: flex; } .hvr__sector {-ms-flex-positive: 1; flex-grow: 1; } .hvr {position: relative; height: 100%; } @media (max-width:579px){.hvr{display: none; } } .images {display: block; overflow: hidden; position: relative; height: 100% } body:not(.template-is-collection) .images img{height: 100%; max-height: 100%; object-fit: cover; } .image {display: block !important; border-radius: 2px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.3s linear; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; } .product__card-link{position: relative; display: block; z-index: 1; height: 100%; } .image.active {position: relative; opacity: 1; transition: opacity 0.3s linear; } .hvr__dots {position: absolute; right: 1rem; bottom: 1.3rem; display: flex; align-items: end; justify-content: space-between; transition: .4s; width: 32px; height: 15px; background-color:transparent; opacity: 0; } .box-product:hover .hvr__dots{opacity: 1; } .image-no-dots .hvr__dots{display: none; } .hvr__dot {display: -ms-flexbox; display: flex; -ms-flex-positive: 1; height: 5px; width: 2px; background: #808080; transition: .4s } .hvr__dot--active {background: black; height: 15px; transition: .4s }