.imgServicio_2 {
  height: 80vh !important;
}

.imgServicio_4 {
  background-color: red;
  opacity: 1;
  background: url("../public/plano_hover.webp") no-repeat;
  background-size: cover;
  background-position: center;
}

.imgServicio_4 > figure {
  -webkit-clip-path: polygon(0 0%, 108% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0 0%, 108% 0%, 100% 100%, 0% 100%);
  transition: -webkit-clip-path 750ms ease;
  transition: clip-path 750ms ease;
  transition: clip-path 750ms ease, -webkit-clip-path 750ms ease;
}

.imgServicio_4:hover > figure {
  -webkit-clip-path: polygon(0 0%, 0% 0%, 0% 100%, 0% 100%);
          clip-path: polygon(0 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: -webkit-clip-path 550ms ease;
  transition: clip-path 550ms ease;
  transition: clip-path 550ms ease, -webkit-clip-path 550ms ease;
}

.imgServicio_4 > figure > img {
  flex-shrink: 0;
}

@media screen and (max-width: 1000px) {
  .imgServicio_4 {
    background-size: contain;
  }
  .imgServicio_2 {
    height: auto !important;
  }
}

@media (hover: hover) and (pointer: fine) {
    .imgServicio_4:hover > figure {
        -webkit-clip-path: polygon(0 0%, 0% 0%, 0% 100%, 0% 100%);
              clip-path: polygon(0 0%, 0% 0%, 0% 100%, 0% 100%);
        transition: -webkit-clip-path 550ms ease;
        transition: clip-path 550ms ease;
        transition: clip-path 550ms ease, -webkit-clip-path 550ms ease;
    }
}