section{
    display: flex;
    margin: 5vh 0;
}

/* for each artwork and description and title */
.piece{
    display: flex;
    margin-right: 64px;
    width: 40vw;
}

.artwork-image > img{
    display: inline-block;
    transition: 0.4s;
    max-width:20vw;
    max-height: 60vh;
}
  
.artwork-image > img:hover {
    box-shadow: 0 10px 6px -6px #777;
    cursor: pointer;
}
  
.artwork .artwork-description {
    display: inline-block;
    max-width: 20vw;
    max-height: 60vh;
}
.artwork-description > p{
    
    width: 20vw;
    max-height: 60vh;
    padding-right: 5px;
}
.artwork-description > h3{
    margin-top: 0;
    width: 20vw;
}
  

/* for small screen view */
@media(max-width:1200px){
    .piece{
        margin-bottom: 64px;
        width: 80vw;
    }
    .artwork-description > p{
        width: 40vw;
    }
    .artwork-description > h3{
        width: 40vw;
    }
    .artwork-image > img{
        max-width:40vw;
        max-height: 50vh;
    }
    section{
        flex-direction: column;
    }
}


/* for mobile view */
@media(max-width:650px){
    .piece{
        display: flex;
        flex-direction: column;
        margin-bottom: 64px;
        width: 90vw;
    }
    .artwork-description > p{
        width: 90vw;
    }
    .artwork-description > h3{
        width: 90vw;
    }
    .artwork-image > img{
        max-width: 90vw;
        max-height: 70vh;
    }
    section{
        flex-direction: column;
    }
    main{
        margin-left: 2vw;
    }
}