/* DESKTOP */
@media screen and (min-width:501px) {

  .gal__item, .gal__photo {
    -webkit-user-drag: none;
    user-drag: none;
  }

  .gal__mobile { display: none; }

  .gal { position: relative; margin: 0 0 15px 0; border-radius: 3px; white-space: nowrap; font: 0/0 a; overflow: hidden; touch-action: pan-y pinch-zoom;}

  .gal__photos { float: left; }

  .gal__item { display: inline-block; margin: 0 1px 0 0; }
  .gal__item:last-child { margin: 0; }
  .gal__photo { height: 200px; display: inline-block; }


  .gal__nav { position: absolute; width: 50px; height: 50px; z-index: 2; top: 77px; cursor: default; opacity: .2; transition: opacity 200ms; }
  .gal__nav--left { background: url(i/left.svg) no-repeat 50% 50%; left: 10px; }
  .gal__nav--right { background: url(i/right.svg) no-repeat 50% 50%; right: 10px; }
  .gal__nav--active { opacity: 1; cursor: pointer; }

  .gal__bullet { box-sizing: border-box; width: 12px; height: 12px; display: inline-block; cursor: pointer; border: 1px solid rgba(0,0,0,.5); background: rgba(255,255,255,.5); background-clip: padding-box; border-radius: 50%; transition: background 200ms; margin: 0 4px 0 0 }
  .gal__bullet:last-child { margin: 0; }
  .gal__bullet--active { background-color: #fff; }
  .gal__bullet:hover { background-color: #fff; }

}

/* MOBILE */
@media screen and (max-width:500px) {

  .gal__desktop { display: none; }

  .gal { height: 150px; position: relative; margin: 1px 0 0 0; white-space: nowrap; font: 0/0 a; overflow: hidden; /*touch-action: pan-y pinch-zoom;*/}

  .gal__photos { overflow-x: scroll; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 0 0 20px 0; }

  /*
  .gal__photos { transition: transform 0s cubic-bezier(0, 1, 1, 1) 0s; }
  */
  .gal__item { width: 100%; display: inline-block; margin: 0 0 0 10px; padding: 0 0 20px 0; scroll-snap-align: center; }
  .gal__item--first { margin: 0 }
  .gal__photo { height: 150px; cursor: pointer; display: block; width: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;  }


  .gal__bullets { z-index: 1; position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; }


  .gal__bullet { cursor: pointer; display: inline-block; width: 7px; height: 7px; background: rgba(255,255,255,0.6); border-radius: 50%; margin: 0 3px; vertical-align: middle; box-sizing: border-box; }
  .gal__bullet--active { width: 11px; height: 11px; border: 2px solid rgba(255,255,255,0.8); background: transparent; }

}