.section--testimonials
  padding-top: 76px
  padding-bottom: 76px

  &::before
    content: ''
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    background-image: linear-gradient($decorator-line-gray 1px, transparent 1px), linear-gradient(90deg, $decorator-line-gray 1px, transparent 1px)
    background-size: 24px 24px
    background-repeat: repeat
    opacity: 0.4
    transform: translateY(-5px)
    mask-image: radial-gradient(black, transparent)
    mask-size: 55% 55%
    mask-position: 60% 15%
    mask-repeat: no-repeat
    animation: gridAnimation 20s linear infinite

  +media(l)
    padding-top: 8px
    padding-bottom: 24px

  +media(s)
    padding-top: 48px

.testimonials
  display: grid
  grid-template-columns: repeat(3, minmax(100px, 352px))
  grid-template-areas: "head head testimonial1" ".testimonial2 testimonial3" "testimonial4 testimonial5 testimonial6"
  column-gap: 32px
  align-items: center

  +media(l)
    column-gap: 18px
    row-gap: 8px

  +media(s)
    grid-template-columns: unset
    grid-template-areas: unset

.testimonials__head
  grid-column: 1 / 3

  +media(s)
  grid-column: unset

.testimonials__title
  display: block
  margin-top: 10px
  font-size: 84px
  line-height: 100px
  letter-spacing: -0.03em
  white-space: nowrap

  +media(l)
    font-size: 60px
    line-height: 72px

  +media(s)
    font-size: 32px
    line-height: 38px

.testimonials__list
  display: contents

  +media(s)
    display: flex
    width: calc(100% + $container-padding-mobile * 2)
    max-width: calc(100% + $container-padding-mobile * 2)
    margin: 0
    margin-left: -$container-padding-mobile
    margin-right: -$container-padding-mobile
    overflow: hidden
    overflow-x: auto

.testimonials__item
  width: 100%
  padding: 16px

  +media(l)
    padding: 8px

  +media(s)
    min-width: 100%
    padding: 16px 0

    &:first-child
      padding-left: 24px

    &:last-child
      padding-right: 24px

    & + &
      margin-left: 48px

.testimonials__item:nth-child(1)
  grid-area: testimonial1

.testimonials__item:nth-child(2)
  grid-area: testimonial2

.testimonials__item:nth-child(3)
  grid-area: testimonial3

.testimonials__item:nth-child(4)
  grid-area: testimonial4

.testimonials__item:nth-child(5)
  grid-area: testimonial5

.testimonials__item:nth-child(6)
  grid-area: testimonial6

.testimonials__item:nth-child(even),
.testimonials__item:nth-child(odd)
  +media(s)
    grid-area: unset

.testimonials__image
  max-width: 100%
  border-radius: 16px
  object-fit: cover
  margin: 0 auto
  box-shadow: 0px 12px 36px transparentize($black, 0.95)
  overflow: hidden

  +media(l)
    box-shadow: 0px 8px 22px transparentize($black, 0.95)

.testimonials__paginations
  display: none
  width: fit-content
  max-width: 100%
  flex-wrap: wrap
  column-gap: 12px
  row-gap: 12px
  margin: 16px auto 0

  +media(s)
    display: flex

.testimonials__pagination
  display: flex
  justify-content: center
  align-items: center
  position: relative
  min-width: 12px
  width: 12px
  max-width: 12px
  min-height: 12px
  height: 12px
  max-height: 12px
  border-radius: 12px
  background-color: $light
  transition: $all

.testimonials__pagination::before
  content: ''
  position: absolute
  top: 50%
  left: 50%
  width: calc(100% + 12px)
  height: calc(100% + 12px)
  transform: translate(-50%, -50%) 

.testimonials__pagination--active
  background-color: $decorator-line-red