/*
*ZOOM LENS*
*/
.bc-zoom-lens{
    display: block;
    width: fit-content; /**/
    height: fit-content; /**/
}
.bc-zoom-lens__image {
  position: relative; /**/
  display: block; /**/

  object-fit: cover; /**/

  width: 100%;
  height: 100%; /**/
  --bgimage: url(https://images.pexels.com/photos/17050728/pexels-photo-17050728/free-photo-of-madera-carretera-paisaje-agua.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
}
.bc-zoom-lens__glass { /*zoom*/
  position: absolute; /**/
  --glasstop: 0; /**/
  --glassleft: 0; /**/
  --width: 50px;
  top: calc(var(--glasstop) - var(--width)/2); /*dimensiones entre 2*/
  left: calc(var(--glassleft) - var(--width)/2); /*dimensiones entre 2*/
  width: var(--width); /*dimensiones*/
  height: var(--width); /*dimensiones*/
  background-image: var(--bgimage); /*mismo src que en el html de la imagen*/

  border: 1px solid white; /*border*/
  border-radius: 50%; /*border*/

  pointer-events: none; /**/
  opacity: 0; /**/

  transform: scale(0); /**/
  --scale-duration: 200ms;
  transition: transform var(--scale-duration); /*duracion scale*/
  z-index: 9999;
}
.bc-zoom-lens__show {
  opacity: 1; /**/
  --scale: 2;
  transform: scale(var(--scale)); /*scale zoom*/
}