@media only screen and (min-width: 768px) {
    section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 5vw -1vw;
    }

    article {
        display: flex;
        flex-direction: column;
        margin: 5vw 1vw;
        width: 180px;
        height: 460px;
    }

    article img {
        width: 180px;
        height: 272px;
    }

    .modal {
        top: 20%;
        display: flex;
        width: 60%;
        max-height: 60vh;
        left: 50%;
        margin-left: -30%;
        box-sizing: border-box;
        padding: 60px;
    
    }

    .hidden {
        display: none;
    }
        
    #close-modal {
        display: flex;
        align-self: flex-end;
        margin-top: -40px;
        margin-left: 40px;
        position: fixed;
    }

    div#modal-content {
        padding: 0 30px;
    }

    h3 {
        display: inline;
    }

    input#submit {
        margin: 15px 10px;
    }
}

@media only screen and (min-width: 1024px) {
    section {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    article {
        width: 184px;
        margin: 5vh 1vw;
        height: 460px;
    }

    article img {
        width: 184px;
        height: 278px;
    }
}

@media only screen and (min-width: 1440px) {
    section {
        margin: 5vh -1vw;
    }

    article {
        display: flex;
        flex-direction: column;
        margin: 5vh 1vw;
        width: 260px;
        height: 540px;
    }

    article img {
        width: 260px;
        height: 392px;
    }
}