/* -------------------------------- 

File#: _2_draggable-img-gallery
Title: Draggable Image Gallery
Descr: A gallery of images that can be dragged to reveal new items
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

/* * {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
} */

/* body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
} */

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

a {
  color: hsl(250, 84%, 54%);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

/* @media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
} */

/* variables */
:root {
  /* colors */
  --dk0-color-primary-hsl: 250, 84%, 54%;
  --dk0-color-bg-hsl: 0, 0%, 100%;
  --dk0-color-contrast-high-hsl: 230, 7%, 23%;
  --dk0-color-contrast-higher-hsl: 230, 13%, 9%;

  /* spacing */
  --dk0-space-md: 1.25rem;
  --dk0-space-lg: 2rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --dk0-space-md: 2rem;
    --dk0-space-lg: 3.125rem;
  }
}

/* component */
:root {
  --drag-gallery-img-width: 260px;
  --drag-gallery-img-gap: var(--dk0-space-lg);
}

@supports (--css: variables) {
  @media (min-width: 48rem) {
    :root {
      --drag-gallery-img-width: 400px;
    }
  }
  @media (min-width: 64rem) {
    :root {
      --drag-gallery-img-width: 520px;
    }
  }
}
.drag-gallery {
  position: relative;
  overflow: hidden;
}
.drag-gallery:focus {
  outline: none;
}

.drag-gallery__list {
  display: flex;
  align-items: center;
  overflow: auto;
  padding: 0 var(--dk0-space-md);
}
.drag-gallery__list::after {
  display: block;
  content: "";
  height: 1px;
  padding-right: inherit;
}

.drag-gallery__item {
  float: left;
  width: var(--drag-gallery-img-width);
  flex-shrink: 0;
  margin-right: var(--drag-gallery-img-gap);
}
.drag-gallery__item:last-child {
  margin-right: 0;
}
.drag-gallery__item img {
  display: block;
}

.drag-gallery__gesture-hint {
  width: 4em;
  height: 4em;
  background-color: rgba(0, 0, 0, 0.95);
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 2em);
  left: calc(50% - 2em);
  display: none;
}

.drag-gallery {
  cursor: -webkit-grab;
  cursor: grab;
}

.drag-gallery--is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.drag-gallery__list {
  overflow: visible;
  will-change: transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.drag-gallery__item {
  opacity: 0;
  transition: opacity 1.5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.drag-gallery__item img {
  pointer-events: none;
}

.drag-gallery__item--visible {
  opacity: 1;
}

.drag-gallery--anim-off .drag-gallery__item {
  opacity: 1;
}

.drag-gallery__gesture-hint {
  display: block;
  opacity: 0;
  -webkit-transform: translateX(0) scale(1);
          transform: translateX(0) scale(1);
}

.drag-gallery__gesture-hint--animate {
  -webkit-animation: drag-gallery-gesture-hint 2.8s;
          animation: drag-gallery-gesture-hint 2.8s;
}

@-webkit-keyframes drag-gallery-gesture-hint {
  0%, 60% {
    opacity: 0;
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
  5%, 65% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
  10%, 70% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(0.8);
            transform: translateX(0) scale(0.8);
  }
  30%, 90% {
    opacity: 1;
    -webkit-transform: translateX(-200%) scale(0.8);
            transform: translateX(-200%) scale(0.8);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  35%, 95% {
    opacity: 1;
    -webkit-transform: translateX(-200%) scale(1);
            transform: translateX(-200%) scale(1);
  }
  40%, 100% {
    opacity: 0;
    -webkit-transform: translateX(-200%) scale(1);
            transform: translateX(-200%) scale(1);
  }
}

@keyframes drag-gallery-gesture-hint {
  0%, 60% {
    opacity: 0;
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
  5%, 65% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
  }
  10%, 70% {
    opacity: 1;
    -webkit-transform: translateX(0) scale(0.8);
            transform: translateX(0) scale(0.8);
  }
  30%, 90% {
    opacity: 1;
    -webkit-transform: translateX(-200%) scale(0.8);
            transform: translateX(-200%) scale(0.8);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  35%, 95% {
    opacity: 1;
    -webkit-transform: translateX(-200%) scale(1);
            transform: translateX(-200%) scale(1);
  }
  40%, 100% {
    opacity: 0;
    -webkit-transform: translateX(-200%) scale(1);
            transform: translateX(-200%) scale(1);
  }
}