img {
    max-width: 600px;
    height: auto;
}

@media (max-width: 600px) {
    img {
        max-width: 250px;
        height: auto;
        text-align: center;
    }
}

.gallery {
    width: 600px;
    height: 300px;
    line-height: 0;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(-10deg);
    transition: .2s;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: .2s;
    cursor: pointer;
    outline: rgba(235, 233, 239, 0.3) solid 3px;
}

.box:nth-of-type(1) {
    transform: translateZ(0px) translateX(10px);
}

.box:nth-of-type(2) {
    transform: translateZ(-40px) translateX(60px);
}

.box:nth-of-type(2) img {
    filter: blur(2px);
}

.box:nth-of-type(3) {
    transform: translateZ(-80px) translateX(110px);
}

.box:nth-of-type(3) img {
    filter: blur(2px);
}

.box:nth-of-type(4) {
    transform: translateZ(-120px) translateX(160px);
}

.box:nth-of-type(4) img {
    filter: blur(3px);
}

.box:nth-of-type(5) {
    transform: translateZ(-160px) translateX(210px);
}

.box:nth-of-type(5) img {
    filter: blur(4px);
}

.box:nth-of-type(6) {
    transform: translateZ(-200px) translateX(-200px);
}

.box:nth-of-type(6) img {
    filter: blur(5px);
}

.box:focus {
    transform: rotateY(10deg) translateY(10px) translateZ(120px) translateZ(0px) translateX(-50px);
    /* outline: none; */
}

.box:focus img {
    filter: blur(0px);
}

@media (max-width: 500px) {
    .box:nth-of-type(1) {
        transform: translateZ(0px) translateX(30px);
    }
    .box:nth-of-type(2) {
        transform: translateZ(-40px) translateX(80px);
    }
    .box:nth-of-type(2) img {
        filter: blur(2px);
    }
    .box:focus {
        transform: rotateY(10deg) translateY(10px) translateZ(120px) translateZ(0px) translateX(0px);
        outline: none;
    }
    .box:focus img {
        filter: blur(0px);
    }
}