body {
    font-family: 'Montserrat', sans-serif;
}

a {
    all: unset;
    cursor: pointer;
}

@media (max-width: 640px) {

    .container {
        display: grid;
        grid-template-columns: 160px 160px;
        grid-gap: 25px;
    }

    .container .card {
        background-color: gray;
        aspect-ratio: 1;
        height: 170px;
        border-radius: 20px;
    }

    #main {
        padding-left: 10px; 
        width: 100% - 10px;
     }

}

@media (min-width: 1000px) {

    .container {
        display: grid;
        grid-template-columns: 250px 250px 250px 250px;
        grid-gap: 5px;
    }
    
    .container .card {
        background-color: gray;
        aspect-ratio: 1;
        height: 200px;
        border-radius: 20px;
    }
    
    #main {
        padding-left: 400px; 
        padding-right: 400px;
     }

}