// Partials / Hero Code

.block{
  .hero-code{
    margin-top:-210px;
  }
}

.hero-code{
  @extend %background-image-positions;
  background-size:cover;
  // 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{
      position:relative;
      display:flex;
      z-index:2;
    }

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

      &.expanded{
        img{
          position:relative;
          top:-50px;
          left:80px;
          transform:scale(1.5);
        }
      }

      &.up-50{
        margin-top:-50px;
        margin-bottom:-50px;
      }

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

  .content{
    padding-top:60px;
    padding-right:80px;

    .title{
      max-width:525px;
      font-size:41px;
      line-height:49px;
      margin-bottom:18px;
      font-weight:500;

      &.font-size-large{
        font-size:49px;
        line-height:55px;
        padding-right:35px;
      }
    }

    .description{
      max-width:525px;
      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;
          }
        }
      }
    }

    .icons{
      display:flex;
      margin-top:40px;
      // margin-bottom:40px;
      
      & > a{
        margin-right:34px;

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

      svg{
        height:34px;
      }
    }
    
  }

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

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

}
