.testimonials
  background-color: $background

.love
  align-items: flex-start
  display: flex
  justify-content: center

.more-loves
  align-items: center
  display: flex
  justify-content: center
  margin-top: 1.5rem
  text-align: center
  .button
    height: auto
    padding: 0.75em 1.5em
    span
      transform-origin: center center
      transition: transform $speed $easing
    &:hover
      span
        transform: scale(1.04)

+mobile
  .testimonials
    padding: 1.5rem
  .love
    margin-bottom: 1.5rem

+tablet
  .testimonials
    padding: 3rem
  .love + .love
    margin-top: 1.5rem

.rainbow
  animation: rainbow 8s ease infinite
  background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
  background-size: 800% 800%

.hero.is-love
  .title,
  .subtitle
    color: $white

@keyframes rainbow
    0%
      background-position: 0% 80%
    50%
      background-position: 100% 20%
    100%
      background-position: 0% 80%

.hug
  align-items: flex-start
  display: flex
  justify-content: center

.more-love-container
  align-items: center
  background-color: $background
  border-radius: $radius
  display: flex
  justify-content: center
  padding: 1.5rem
  .tw-button
    margin-left: 1.5rem

+mobile
  .hug,
  .more-love
    margin: 1.5rem

+tablet
  .more-love
    margin: 3rem 0 1.5rem
  .hugs
    display: flex
    flex-wrap: wrap
    padding-bottom: 3rem
  .hug
    margin-top: 1.5rem
    width: calc(33.3333% - 1rem)
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3)
      margin-top: 0
    &:nth-child(3n-1),
    &:nth-child(3n)
      margin-left: 1.5rem