.button {
  font-size: 14px;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: $body-font-family;
  font-weight: 600;
  padding: 30px 50px;
  margin: 15px 0;
  transition: .5s;

  @include breakpoint (medium down){
    margin: 10px 0;
    padding: 20px 30px;
  }

  &.small {
    padding: 15px 25px;
  }

  &:hover {

  }

  &.red {
    background: $violet;
    color: $white;

    &:hover {
      background: $red;
    }
  }

  &.yellow {
    background: $yellow;
    color: $black;

    &:hover {
      background: $white;
      color: $black;
    }
  }
}



.link {
    display: block;
    position: relative;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 900;
    padding-left: 25px;
    transition: .3s ease-in-out;

    &::before {
      position: absolute;
      content: '';
      left: 0;
      top: 8px;
      height: 3px;
      width: 12px;
      background: $black;
      transition: .3s ease-in-out;
    }

    &:hover {
      color: $violet!important;
      padding-left: 30px;

      &::before {
        background: $violet;
        width: 16px;
      }
    }
}

.swiper-button-prev, .swiper-button-next  {
  background: $yellow;
  border: none;
  color: $violet;

  &:hover {
    background: rgb(199,43,144);
    background: linear-gradient(176deg, rgba(199,43,144,1) 0%, rgba(214,81,167,1) 100%);

    &::after {
      color: $yellow;
      border: none;
    }
  }

  &::after {
    color: $violet;
  }
}
