.detail-page
  .glide__slides
    white-space inherit

    img
      padding 0 55px

    video
      padding 0 55px
      width 100%
      max-height 100%

.glide__slides,
.glide__track
  overflow hidden

.glide
  box-sizing: border-box;
  position: relative;
  width: 100%
  min-width 100%

  .glide-bullets
    display flex
    position absolute
    left 50%
    transform translateX(-50%)
    bottom 15px
    z-index 1
    background rgba(0, 0, 0, .4)
    border-radius 100px
    padding 5px
    height 20px

    li
      height 10px
      width 10px
      border-radius 20px
      margin 0 5px
      border 1px solid rgba(255, 255, 255, .5)
      cursor pointer

    .glide__bullet--active
      background rgba(255, 255, 255, .8)

  .glide-nav
    button
      position absolute
      top 50%
      left auto
      right 10px
      height 35px
      width 35px
      margin-top -17.5px
      border-radius 100px
      z-index 1 !important
      padding 0
      display flex
      align-items center
      justify-content center
      background rgba(0, 0, 0, .2)

      &:hover
        background rgba(0, 0, 0, .4)

      &:active
        background rgba(0, 0, 0, .8)

    .prev-btn
      right auto
      left 10px

//RESPONSIVE
@media only screen and (max-width: 992px)
  .detail-page
    .glide__slides
      video
      img
        padding 0 15px

@media only screen and (max-width: 768px)
  .detail-page
    .glide__slides
      video
      img
        padding 0

@media only screen and (max-width: 576px)
  .glide
    .glide-bullets
      bottom 10px
      height 13px
      padding 3px

      li
        margin 0 3px
        height 7px
        width 7px

    .glide-nav
      button
        margin-top -15px
        right 5px
        left auto
        height 30px
        width 30px

        .icon
          height 18px
          width 18px
          min-width 18px

      .prev-btn
        right auto
        left 5px