@import '~styles/variables.less';

.HomeActions {
  padding: 8rem 4rem 10rem;
  background: @primary-color;
  

  &-title {
    color: #FFF;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.6rem;
  }

  &-buttons {
    display: flex;
    justify-content: center;
    align-items: center;

    &-button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 3.8rem;
      padding: 0 3rem;
      font-size: 1.2rem;
      border-radius: 4px;
      margin: 0 1rem;

      &:hover {
        opacity: 0.95;
      }

      &.is-light {
        background: #FFF;
        color: @secondary-color;
      }

      &.is-dark {
        background: @secondary-color;
        color: #FFF;
      }
    }
  }

  @media @tablet-query {
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    &-title {
      margin-bottom: 2.4rem;
      font-size: 1.8rem;
    }

    &-buttons {
      flex-direction: column;

      &-button {
        width: 100%;
        max-width: 280px;
        margin: 0 0 1rem;
        height: 3.4rem;
        font-size: 1.1rem;
      }
    }
  }
}