@keyframes reanimate-underline-1px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 1px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 1px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 1px;
  }
}
@keyframes reanimate-underline-2px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 2px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 2px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 2px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 2px;
  }
}
@keyframes reanimate-underline-3px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 3px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 3px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 3px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 3px;
  }
}
@keyframes reanimate-underline-4px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 4px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 4px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 4px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 4px;
  }
}
@keyframes reanimate-underline-5px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 5px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 5px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 5px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 5px;
  }
}
/** Usage

    ```scss
      .lds { 
        @include ldsRingAnimation($foreground-color: #fff, $width: 2px, $size: 25px);
      }
    ```

    ```html
      <div class="lds">
        <div></div>
        <div></div>
        <div></div>
      </div>
    ```
 */
.cmp-image {
  line-height: 0;
  position: relative;
}
.cmp-image .cmp-image__preview-icon {
  background: rgba(196, 199, 207, 0.5);
  position: absolute;
  padding: 13px 9px 5px 15px;
  cursor: pointer;
  transition: filter 0.2s;
  border: none;
  left: 0;
}
@media (hover: hover) {
  .cmp-image .cmp-image__preview-icon:hover {
    background: rgba(196, 199, 207, 0.8);
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .cmp-image .cmp-image__preview-icon:hover {
    background: rgba(196, 199, 207, 0.8);
  }
}
.cmp-image .cmp-image__preview-icon svg {
  width: 24px;
  height: 24px;
}

.cmp-image__image {
  max-width: 100%;
  display: inline-block;
}

[data-zoom-image] {
  cursor: pointer;
}

#modal-image-zoom .modal--content {
  max-width: 1000px;
  padding: 50px 60px;
  width: auto;
}
#modal-image-zoom .cmp-image__image {
  width: 100%;
}