/* ===================================
    Gallery
====================================== */

/*
 * Gallery  01
 */

.gallery-composition {
    position: relative;
    margin-top: 80px;
}

@media (min-width: 768px) {
    .gallery-composition {
        min-height: 600px;
    }
}

@media only screen and (max-width: 767px) {
    .gallery-composition {
        padding-bottom: 130px;
        position: relative;

    }
}

.composition__photo {
    width: 55%;
    -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    position: absolute;
    z-index: 10;
    -webkit-transition: all .2s;
    transition: all .2s;
    outline-offset: 2rem;
}

@media only screen and (max-width: 767px) {
    .composition__photo {
        float: left;
        position: relative;
        width: 33.33333333%;
        margin-bottom: 2rem;
        outline-offset: 0rem;
        border-radius: 0px;
        -webkit-box-shadow: none;
        box-shadow: none;
        transition: none;
    }
}

.composition__photo--p1 {
    left: 0;
    top: -2rem
}

@media only screen and (max-width: 767px) {
    .composition__photo--p1 {
        top: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.composition__photo--p2 {
    right: 0;
    top: 2rem
}

@media only screen and (max-width: 767px) {
    .composition__photo--p2 {
        top: -1rem;
       -webkit-transform: scale(1);
        transform: scale(1);
        z-index: 100;
    }
}

.composition__photo--p3 {
    left: 20%;
    top: 10rem
}

@media only screen and (max-width: 767px) {
    .composition__photo--p3 {
        top: -1rem;
        left: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

}

.composition__photo:hover {
    outline: 10px solid #12988b;
    -webkit-transform: scale(1.05) translateY(-0.5rem);
    transform: scale(1.05) translateY(-0.5rem);
    -webkit-box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
    box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
    z-index: 20
}

@media only screen and (max-width: 767px) {
    .composition__photo:hover {
        outline: 0; 
        transform: scale(1); 
        box-shadow: none;
        z-index: auto;
    }
}

    .composition:hover .composition__photo:not(:hover) {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)
    }