.natours-composition{
  position: relative;

  &__photo{
    position: absolute;
    width: 55%;
    box-shadow: 0 1.5rem 4rem rgba($natours-color-black, .4);
    border-radius: 2px;
    z-index: 10;
    transition: all .2s;
    outline-offset: 2rem;

    @include respond(tab-port){
      float: left;
      position: relative;
      width: 33.33333%;
      box-shadow: 0 1.5rem 3rem rgba($natours-color-black, .2);

    }

    &--p1{
      top: -2rem;
      left: 0rem;

      @include respond(tab-port){
        top: 0;
        transform: scale(1.2);
      }
    }

    &--p2{
      top: 2rem;
      right: 0rem;

      @include respond(tab-port){
        top: -1rem;
        transform: scale(1.3);
        z-index: 100;
      }
    }

    &--p3{
      top: 10rem;
      left: 20%;

      @include respond(tab-port){
        top: 0;
        left: 0;
        transform: scale(1.1);
      }
    }

    &:hover{
      outline: 1.5rem solid $natours-color-primary;
      transform: scale(1.05) translateY(-.5rem);
      box-shadow: 0 2.5rem 4rem rgba($natours-color-black, .5);
      z-index: 20;
    }
  }

  &:hover &__photo:not(:hover){
    transform: scale(0.95);
  }

}