.composition {
  position: relative;

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

    @include respond(tab-port) {
      float: left;
      position: relative;
      width: 33.333333%;
      box-shadow: 0 1.5rem 3rem rgba($color-black, 0.2);
    }
    &--p1 {
      left: 0;
      top: -2rem;

      @include respond(tab-port) {
        top: 0;
        transform: scale(1.2);
      }
    }
    &--p2 {
      right: 0;
      top: 2rem;
      @include respond(tab-port) {
        top: -1rem;
        transform: scale(1.3);
        z-index: 100;
      }
    }
    &--p3 {
      left: 20%;
      top: 10rem;
      @include respond(tab-port) {
        top: 1rem;
        left: 0;
        transform: scale(1.1);
      }
    }

    &:hover {
      outline: 1.5rem solid $color-primary;
      transform: scale(1.1);
      box-shadow: 0 2.5rem 4rem rgba($color-black, 0.5);
      z-index: 20;
    }
  }
  // 2nd way to decrease other images size while hover one image
  // basically it becomes that selector:--> .composition:hover .composition__photo:not(:hover){}
  &:hover &__photo:not(:hover) {
    transform: scale(0.9) translateY(-0.5rem);
    filter: brightness(50%);
  }
}

// 2nd way to decrease other images size while hover one image
// ~ is the general sibling combinator in CSS, allowing you to select siblings that come after the hovered element.
// .composition__photo:hover ~ .composition__photo {
//   transform: scale(0.9);
//   filter: brightness(50%);
// }
