// Partials / Hero Code

.hero-code{
  @extend %background-image-positions;
  background-size:cover;
  // background-size:1540px auto;
  // background-position:top left;
  // background-repeat:no-repeat;
  background-color:$hero-bg;
  color:$white;
  
  & > .inner{
    display:flex;
    max-width:$desktop-max-width;
    margin-left:auto;
    margin-right:auto;
    padding:250px $desktop-gutter 150px $desktop-gutter;
    width:100%;

    .content{
      display:flex;
      align-items:center;
    }

    .illustration{
      display:flex;
      flex:0 0 540px;

      & > div{
        width:100%;
      }
    }
  }

  .content{
    padding-right:80px;

    .title{
      font-size:41px;
      line-height:49px;
      margin-bottom:18px;
    }

    .description{
      padding-right:70px;
      font-size:18px;
      line-height:30px;
      color:$hero-description-color;

      p{
        margin-bottom:20px;

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

      p + .actions{
        margin-top:10px;
      }

      .actions{
        display:inline-flex;
        margin-top:30px;
  
        .button{
          margin-right:15px;
  
          &:last-child{
            margin-right:0;
          }
        }
      }
    }

    
  }

  .illustration{
    max-width:560px;
    width:100%;

    svg{
      width:100%;
      height:auto;
    }
  }

}
