*{
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-size: 12px;
    user-select: none;
    scroll-behavior: smooth;
    transition:all 0.3s ease-in-out;
}

html{
    width:100vw;
    height:100vh;
    display:grid;
    place-items: center;
}

.body{
    width:100vw;
    height:100vh;
}

.container{
    width:100%;
    height:100%;
    display: grid;
    gap:2%;
}
.tablets{display: none;}

.img{
    padding:1vw 0;
    display:grid;
    place-items:center;
}

.i1,.i2,.i3{
    height: 100%;
}
.i1 img{
    margin-top: 0;
    width:max(40vw,400px);
}
.i2 img{
    width: 50vw;
}
.i3 img{
    width: 90vw;
}

.i1:hover,.i2:hover,.i3:hover{
    filter:drop-shadow(0px 0px 20px rgba(0,0,0,0.1));
}

@media screen and (min-width: 490px) and (max-width:767px){
    .container{
        display:grid;
    }
    .pc{
        display: none !important;
    }
    .i2 img{
        width:95vw;
    }
    .i1 img{
        margin-top:0vh;
        width:95vw;
    }
    .i3 img{
        width:95vw;
    }
    .mobile{display: none !important;}
    .tablets{
        display: grid;
    }
}

@media screen and (max-width:490px){
    .container{
        display:grid;
    }
    .img{
        padding:5% 0;
    }
    .pc{
        display: none !important;
    }
    .i2 img{
        width: 85vw;
    }
    .i1 img{
        /* margin-top:5vh; */
        width:85vw;
    }
    .i3 img{
        width:55vw;
    }
}

@media screen and (min-width: 767px){
    .mobile{
        display: none !important;
    }
    .tablets{display: none !important;}

    

}