natours-react/src/sass/pages/_home.scss

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

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

.section-features {
  padding: 20rem 0;
  background-image: linear-gradient(
      to right bottom,
      rgba($color-primary-light, 0.8),
      rgba($color-primary-dark, 0.8)
    ),
    url(../../commons/images/nat-4.jpg);
  background-size: cover;
  margin-top: -12rem;

  transform: skewY(-7deg);

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

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

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

  @include respond(tab-port) {
    padding: 20rem 0 10rem 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-light,
    $color-primary-dark
  );

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

.book {
  background-image: linear-gradient(
      105deg,
      rgba($color-white, 0.9) 0%,
      rgba($color-white, 0.9) 50%,
      transparent 50%
    ),
    url(../../commons/images/nat-10.jpg);
  background-size: cover;
  border-radius: $border-radius-default;
  box-shadow: $shadow-default;

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

  @include respond(tab-port) {
    background-image: linear-gradient(
        to right,
        rgba($color-white, 0.9) 0%,
        rgba($color-white, 0.9) 65%
      ),
      url(../../commons/images/nat-10.jpg);
  }

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

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

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