/* 
 We will use WebKit CSS to make it more difficult for users to directly 
 interact with images to block dragging, selection, and preventing them from saving images 
*/

x-main-layout img {
    -webkit-user-drag: none;     /* Safari, Chrome, Edge */
    -webkit-touch-callout: none; /* iOS Safari long press */
    -webkit-user-select: none;   /* Chrome, Safari */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Old IE / Edge */
    user-select: none;           /* Standard property */
}

.image-wrapper {
    position: relative; 
    display: inline-block;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
}

/* Container for background images */
.image__container {
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  
  /* Prevent long touch on mobile devices */
  -webkit-touch-callout: none; 
  -webkit-tap-highlight-color: transparent; 
  touch-action: manipulation; 
}