.medium-zoom-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 300ms;
    will-change: opacity;
  }
  
  .medium-zoom--opened .medium-zoom-overlay {
    cursor: pointer;
    cursor: zoom-out;
    opacity: 1;
  }
  
  .medium-zoom-image {
    cursor: pointer;
    cursor: zoom-in;
    /*
      The `transition` is marked as "!important" for the animation to happen
      even though it's overriden by another inline `transition` style attribute.
      This is problematic with frameworks that generate inline styles on their
      images (e.g. Gatsby).
      See https://github.com/francoischalifour/medium-zoom/issues/110
     */
    transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
    z-index: 100;
  }
  
  .medium-zoom-image--hidden {
    visibility: hidden;
  }
  
  .medium-zoom-image--opened {
    position: relative;
    cursor: pointer;
    cursor: zoom-out;
    will-change: transform;
  }