@import '~styles/variables.less';
@min-tablet-query: ~'(min-width: 920px)';

.HomeIntro {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1440px;
  padding: 0 4rem;
  margin: 4rem auto;
  overflow: hidden;

  @media @thin-query {
    padding: 0 2rem;
  }

  @media @tablet-query {
    padding-top: 3rem;
  }

  &-content {

    &-title {
      margin-bottom: 2rem;
      font-size: 2.6rem;
    }

    &-subtitle {
      margin-bottom: 2rem;
      font-size: 1.4rem;
      opacity: 0.7;
    }

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

      @media @tablet-query {
        margin-left: 0;
      }

      @media @mobile-query {
        flex-direction: column;
        width: 100%;
      }

      &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 4.2rem;
        width: 16rem;
        padding: 0;
        margin: 0 10px;
        border: 2px solid rgba(@text-color, 0.7);
        color: rgba(@text-color, 0.7);
        text-align: center;
        font-size: 1.4rem;
        border-radius: 4px;
        background: #fff;
        transition: transform 200ms ease, box-shadow 200ms ease;

        &:hover,
        &:focus {
          transform: translateY(-2px);
          border-color: rgba(@text-color, 0.9);
          color: rgba(@text-color, 0.9);
        }

        &:active {
          transform: translateY(0px);
          border-color: rgba(@text-color, 1);
          color: rgba(@text-color, 1);
        }

        @media @tablet-query {
          width: 100%;
          height: 5rem;
          font-size: 1.8rem;
          max-width: 320px;
          margin-bottom: 1rem;

          &:last-child {
            margin-bottom: 0;
          }
        }

        &.is-primary {
          border-color: rgba(@primary-color, 0.7);
          color: rgba(@primary-color, 0.7);

          @media @min-tablet-query {
            margin-left: 0;
          }

          &hover,
          &:focus {
            color: @primary-color;
            border-color: rgba(@primary-color, 0.9);
            color: rgba(@primary-color, 0.9);
          }

          &:active {
            border-color: rgba(@primary-color, 1);
            color: rgba(@primary-color, 1);
          }
        }
      }
    }

    @media @thin-query {
      width: auto;
      min-width: 0;

      &-title {
        margin-bottom: 1.5rem;
        font-size: 2.2rem;
      }
  
      &-subtitle {
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
        opacity: 0.7;
      }
    }

    @media @tablet-query {
      text-align: center;

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

        &-auth {
          width: 100%;
          max-width: 260px;
          margin: 0 auto 1rem;
        }
      }
    }
  }

  &-illustration {
    position: relative;
    width: 100%;
    max-width: 480px;
    background-size: contain;

    &:after {
      content: '';
      display: block;
      padding-top: 86.3%; // Aspect ratio of img
    }

    @media @thin-query {
      margin-right: -9rem;
    }

    @media @tablet-query {
      display: none;
    }
  }
}