.section-about{
  background-color: $color-gray-light-1;
  padding: 25rem 0;
  margin-top: -20vh;


}

.section-features{
  padding: 20rem 0;
  background-image: linear-gradient(
                  to right bottom,
                  rgba($color-primary, 0.801),
                  rgba($color-primary-dark, 0.801)) ,
  url('../img/nat-4.jpg');
  background-size: cover;

  transform: skewY(-7deg);
  margin-top: -10rem;

  & > *{
    transform: skewY(7deg);
  }

  @include respond(tab-port){
    padding: 10rem 0 ;
  }

}

.section-tours{
  background-color: $color-gray-light-1;
  padding: 25rem 0 ;
  margin-top: -15rem;

  @include respond(tab-port){
    padding: 20rem 0 ;
  }
}

.section-stories{
  padding: 15rem 0;

  position: relative;

  @include respond(tab-port){
    padding: 10rem 0 ;
  }
}

.section-book{
  padding: 15rem 0;
  background-image: linear-gradient(to right bottom, $color-primary, $color-primary-dark);

  @include respond(tab-port){
    padding: 10rem 0 ;
  }
}

.book{
  background-image: linear-gradient(105deg,rgba($color-white, 0.85) 0%, rgba($color-white, 0.9) 50%, rgba($color-white, 0) 50%),url("../img/nat-10.jpg");
  background-size: cover;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);


  @include respond(tab-land){
    background-image: linear-gradient(105deg,rgba($color-white, 0.85) 0%, rgba($color-white, 0.9) 65%, rgba($color-white, 0) 65%),url("../img/nat-10.jpg");
  }

  @include respond(tab-port){
    background-image: linear-gradient(105deg,rgba($color-white, 0.85) 0%, rgba($color-white, 0.9) 100%),url("../img/nat-10.jpg");
  }

  &__form{
    width: 50%;
    padding: 6rem;

    @include respond(tab-land){
      width: 65%;
    }

    @include respond(tab-port){
      width: 100%;
    }
  }
}