// Masks // General properties .view {

position: relative;
overflow: hidden;
cursor: default;
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
}
img, video {
  position: relative;
  display: block;
}
video {
  &.video-intro {
    z-index: -100;
    top: 50%;
    left: 50%;
    transform: $intro-video-transform;
    transition: $intro-video-transition opacity;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
  }
}

}

// Overlay .overlay {

.mask {
  opacity: 0;
  transition: $mask-overlay-transition;
  &:hover {
    opacity: 1;
  }
}

}

// Zoom .zoom {

img, video {
  transition: $mask-zoom-transition;
}
&:hover {
  img, video {
    transform: $mask-zoom-transform;
  }
}

}

// Patterns $patterns: (

1: "01",
2: "02",
3: "03",
4: "04",
5: "05",
6: "06",
7: "07",
8: "08",
9: "09"

);

@each $no, $filename in $patterns {

.pattern-#{$no} {
  background: url("#{$image-path}/overlays/#{$filename}.png");
  background-attachment: fixed;
}

}