recall.sass

#recallSlider
  .center + .active
    & .recallSlide
      margin-left: -100px

.recallSlide
  display: flex
  flex-direction: row
  border: none
  border-radius: 0 !important
  background: $color-6f6
  padding: 20px 40px
  margin-bottom: 10px
  img
    max-width: 48px
    max-height: 44px
  &__date, &__order, &__author, &__admin
    font-family: hRoman, sans-serif
  &__date, &__order, &__author, &__admin, &__answer, &__text
    color: $color-727
    font-size: rem(15)
    line-height: 23px
  &__admin
    color: $color-01b
  &__text, &__answer
    font-family: hLightItalic, sans-serif

// slider-settings
.recallSlider
  height: 100%
  .owl-item
    transition: .2s
    .recallSlide
      transform: scale(.2)
      margin-left: -200px
      width: 700px
      transition: .2s
    &.active
      &.center
        .recallSlide
          width: 700px
          margin-left: -150px
          transform: scale(1)
          z-index: 5
          position: relative

  .owl-dots
    .owl-dot
      &:active, &:focus
        box-shadow: none
        outline: none
      span
        width: 14px
        height: 14px
        border-radius: 50%
        @extend .bg-6f6
      &.active span
        @extend .bg-01b

@media screen and ( max-width:  1199px)
  .recallSlider
    min-height: 450px
    
@media screen and ( max-width:  991px)
  .recallSlider
    .owl-dots 
      display: none

@media screen and ( max-width:  575px)
  .recall__title
    font-size: rem(20)
  .recallSlider
    .recallSlide
      padding: 20px
      img
        display: none
      .card-line
        flex-direction: column
        text-align: center