.carousel-card
  position absolute
  width 566px
  height 440px
  opacity 0
  transition-property transform, opacity
  transition-duration .3s
  transition-timing-function ease
  transform translateX(0) scale(.9)
  @media (min-width: laptop-lower-limit)
    padding 10px 55px
  @media(max-width: tablet-upper-limit)
    width 452px
    height calc(100% - 120px)
  @media(max-width: mobile-upper-limit)
    width 75vw
    height 100%
    transform none
    position relative
    opacity 1!important
    flex 0 0 75vw
    max-width 320px
    -webkit-scroll-snap-align start
    scroll-snap-align start
    &+&
      margin-left: 20px
  &.rt-card-b2o
    opacity: 1
    transition-property transform, opacity, background-color


  &--active
    @media(min-width: tablet-lower-limit)
      opacity 1
      transform translateX(0) scale(1)
      z-index 99
    &.rt-card-b2o
      background-color: b2c-dark-blue-high
  &--next
    transform translateX(50%) scale(.9)
    opacity .5
    @media(max-width: tablet-upper-limit)
      transform translateX(30%) scale(.9)
    @media(max-width: mobile-upper-limit)
      transform none
  &--previous
    transform translateX(-50%) scale(.9)
    opacity .5
    @media(max-width: tablet-upper-limit)
      transform translateX(-30%) scale(.9)
    @media(max-width: mobile-upper-limit)
      transform none
  &--next-via-one
    transform translateX(50%) scale(.9)
    opacity 0
    @media(max-width: tablet-upper-limit)
      transform translateX(30%) scale(.9)
    @media(max-width: mobile-upper-limit)
      transform none
  &--previous-via-one
    transform translateX(-50%) scale(.9)
    opacity 0
    @media(max-width: tablet-upper-limit)
      transform translateX(-30%) scale(.9)
    @media(max-width: mobile-upper-limit)
      transform none

.custom-carousel
  -webkit-overflow-scrolling: touch
  scroll-behavior: smooth
  height 560px
  width 100%
  padding 60px calc((100% - 566px) / 2)
  -ms-overflow-style: none
  @media(max-width: tablet-upper-limit)
    height 500px
    padding 60px calc((100% - 452px) / 2)
  @media(max-width: mobile-upper-limit)
    display flex
    justify-content space-between
    flex-wrap nowrap
    flex-direction row
    width auto
    overflow-y hidden
    overflow-x auto
    height auto
    padding 0 20px 40px
    -webkit-scroll-snap-type mandatory
    -webkit-scroll-snap-type-x mandatory
    scroll-snap-type mandatory
    scroll-snap-type x mandatory
    scroll-snap-padding 0 20px
    scroll-padding 0 20px
    &:after
      content: ''
      min-width: 20px
      min-height: 100%
      display: block
      flex: 1
  &__paginator
    //position absolute
    //bottom 20px
    //left 50%
    //transform translateX(-50%)
    //width auto
    //margin 0 auto
    //padding 0 10px
    //display flex
    //flex-direction row
    //flex-wrap nowrap
    //@media(min-width: tablet-lower-limit)
    display none
    &-item
      position relative
      width 10px
      height 10px
      border-radius 50%
      border 1px solid main-color
      box-sizing border-box
      &+&
        margin-left 20px
      &--active
        &:after
          position absolute
          content: ''
          top -6px
          left -6px
          border-radius 50%
          width 20px
          height 20px
          border 1px solid main-color
          box-sizing border-box
  //&__nav
  //  @media(max-width: mobile-upper-limit)
  //    position absolute
  //    left 50%
  //    bottom 0
  &__nav-item
    width 50px
    height 50px
    background-color b2c-cool-grey
    border-radius 50%
    position absolute
    z-index 4
    top 50%
    transform translateY(-50%)
    cursor pointer
    opacity .5
    &:hover
      opacity 1
    @media(max-width: mobile-upper-limit)
      display none
  &__left
    left 50px
  &__right
    right 50px
  &__left-arrow,
  &__right-arrow
    position absolute
    top 50%
    left 50%
  &__left-arrow
    transform translateX(-50%) translateY(-50%) rotate(90deg)
  &__right-arrow
    transform translateX(-50%) translateY(-50%) rotate(-90deg)
  &::-webkit-scrollbar
    width: 0 !important