.carousel
  .carousel-title my CAT carousel
  .carousel-hint Use arrow keys <i class="fas fa-angle-left"></i> or <i class="fas fa-angle-right"></i> to scroll.
  .carousel-num
    i 1
    i 2
    i 3
    i 4
    i 5
      
  #carousel.carousel-stage
    .carousel-item
      .carousel-content
        img.carousel-image(src="https://cdn2.thecatapi.com/images/2k6.jpg", alt="cat")
    .carousel-item
      .carousel-content
        img.carousel-image(src="https://cdn2.thecatapi.com/images/ck2.jpg", alt="cat")
    .carousel-item
      .carousel-content
        img.carousel-image(src="https://cdn2.thecatapi.com/images/ckc.jpg", alt="cat")
    .carousel-item
      .carousel-content
        img.carousel-image(src="https://cdn2.thecatapi.com/images/779.jpg", alt="cat")
    .carousel-item
      .carousel-content
        img.carousel-image(src="https://cdn2.thecatapi.com/images/dp8.jpg", alt="cat")
    
    

$black: #191919
$red: #F15025
$grey: #E6E8E6

.carousel
  margin: auto
  width: 50rem
  max-width: calc(100% - 6rem)
  position: relative
  border: 2px solid $grey
  position: relative
  z-index: 1

  &-num
    position: absolute
    font-size: 10px
    color: $black
    text-shadow: 1px 1px $red
    width: 100%
    bottom: 4px
    left: 0
    line-height: 2rem
    display: flex
    z-index: 1
    opacity: 0.6
  
    i
      flex: 1
      text-align: center
  
  &-title
    font-family: 'Josefin Sans', sans-serif
    position: absolute
    bottom: calc(100% + 8px)
    left: 0
    width: 100%
    text-align: center
    color: $grey
    text-shadow: 1px 1px $black
  
  &-hint
    font-family: 'DotGothic16', sans-serif
    width: 100%
    position: absolute
    font-size: 12px
    line-height: 2rem
    color: $grey
    position: absolute
    top: calc(100% + 8px)
    left: 0
    display: flex
    align-items: center
    justify-content: center
    animation: blink 1s ease infinite
    text-shadow: 1px 1px $black
  
    i
      width: 1rem
      height: 1rem
      border: 1px solid $red
      border-radius: 2px
      display: grid
      place-items: center
      margin: 0 8px
    
  &-stage
    width: 100%
    aspect-ratio: 16/9
    display: flex
    overflow-y: hidden
    overflow-x: scroll
    scroll-snap-type: x mandatory
    
    &::-webkit-scrollbar
      width: 4px
      height: 4px
      &-track
        background-color: $grey
      &-thumb
        background-color: $red
        border-radius: 4px
    
  &-item
    height: 100%
    flex: 1 0 100%
    scroll-snap-align: start
  
    &:nth-child(odd)
      background: red
  
  &-content
    width: 100%
    height: 100%
    filter: sepia(.2) brightness(1.15) saturate(1.4)
  
  &-image
    width: 100%
    height: 100%
    object-fit: cover
  
html,
body
  width: 100%
  height: 100%
  display: flex
  background-color: $black

body
  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    opacity: 0.3
    background-image: linear-gradient(45deg, transparent 48%, $grey 48%, $grey 52%, transparent 52%)
    background-size: 10px 10px
  
    
@keyframes blink
  0%, 100%, 20%, 70%
    opacity: 1
  45%
    opacity: 0.3

// JS 404