* {

    box-sizing: border-box;
}
main a{
    display: block;
    margin: 2em auto;
    text-align: center;
}
.image {
    position: relative;
    width: 500px;
    height: 400px;
    margin: 12ex auto;
}
.image2 {
    position: relative;
    margin: 20px auto;
    width: 560px;
    height: 400px;
}
.image2 img {
    display: block;
    width: 560px;
    height: 400px;
}
.image2::before {
    content: url('img/shadow-left.png');
    position: absolute;
    top: 344px;
    right: 280px;
    z-index: -2;
}
.image2::after {
    content: url('img/shadow-right.png');
    position: absolute;
    top: 344px;
    left: 280px;
    z-index: -2;
}
.image img {
    display: block;
    width: 320px;
    height: 320px;
    border: 7px solid #fff;
    margin: 50px auto;
    box-shadow: -1px 2px 18px 1px rgba(0,0,0,0.64);
}
.image::before {
    content: url('img/left.png');
    position: absolute;
    top: -47px;
    left: 31px;
    z-index: -2;
}
.image::after {
    content: url('img/right.png');
    position: absolute;
    top: -51px;
    right: 35px;
    z-index: -2;
}
.test {
    width: 400px;
    height: 400px;
    position: relative;
    margin: 30px auto;

}
.test div {
    width: 400px;
    height: 400px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}
.img1 {
    background: url("img/img1.png");
}
.img2 {
    background: url("img/img2.png");
}