@import "./variables";
@import "./mixins";
.btn {
  padding: 25px;
  display: flex;
  align-items: center;
  width: 250px;
  justify-content: center;
  color: black;
}

.icon {
  transition: 0.3s;
  margin-left: 2%;
}

.btn {
  background: linear-gradient(to left, $primary 50%, darken($color: $primary, $amount: 25) 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}
.btn:hover {
  background-position: left bottom;
  & > .icon {
    margin-left: 15%;
  }
}

.btn-container {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;

  @include down(840){
    flex-direction: column;
    align-items: center;
  }
}

.title{
  text-align: center;
  font-size: 5em;
}