@media (min-width: 1px) {
    .wrapper {margin: 0;}

    nav {padding: 5px 0;}

    main {padding: 20px 15px;}

    .card-grid {    
        display: grid;
        gap: 20px;
        grid-template-columns: auto;
    }

    .card {align-self: center;}
}

@media (min-width: 600px) {
    main {padding: 20px;}

    .card-grid {
        gap: 15px;
        grid-template-columns: auto auto;
    }

    #card3 {grid-row: auto / span 2;}
    #card7 {grid-column: auto / span 2;}
    #card8 {grid-column: auto / span 2;}
    #card9 {grid-column: auto / span 2;}
    #card12 {grid-area: auto / auto / span 2 / span 2;}
}

@media (min-width: 800px) {
    .wrapper {
        margin: 0 auto;
        width: 90%;
    }
}

@media (min-width: 1000px) {
    main {padding: 25px;}

    .card-grid {
        gap: 20px;
        grid-template-columns: auto auto auto;
    }

    #card7 {grid-column: auto / span 3;}
    #card8 {grid-column: auto / span 1;}
    #card10 {grid-column: auto / span 2;}
    #card12 {grid-column: auto / span 3;}
}