.index-grid-row
  position: relative

  &::after
    content: ''
    position: absolute
    z-index: -1
    top: 0
    left: 0
    background: $offWhite
    height: 300px
    width: 100%

  +respond-to-width(600)
    &:after
      display: none

  .no-available
    padding: 60px 20px 0
    text-align: center
    color: white

  .pagination
    +flex(center, center)
    margin: 0
    padding: 0 0 40px
    font-size: 0.9rem
    line-height: 1.2
    list-style: none
    font-weight: 600

    li
      margin: 0 6px

      a
        color: $lightBlue
        text-decoration: none

      &.active
        span
          color: white

      &:first-of-type, &:last-of-type
        a, span
          position: relative
          top: 0
          display: block
          font-size: 0

          .arrow-icon
            position: relative
            width: 10px
            height: 16px
            transform-origin: center
            transform: rotate(-90deg)

            .st0
              fill: $lightBlue

      &:first-of-type
        a, span
          transform: scale3d(-1, 1, 1)

      &.disabled
        opacity: 0.2
        pointer-events: none

        .arrow-icon
          position: relative
          width: 10px
          height: 16px
          transform-origin: center
          transform: rotate(-90deg)

          .st0
            fill: rgba($lightBlue, 0.3)

@import largeBadges
@import squares
@import list