* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    font-size:20px;
    font-family: Arial, Helvetica, sans-serif;
}

main{
    font-size:15px;
}

h1{
    font-size:2rem;
}
/* rem is gebaseerd op html, em op de body */
p {
    font-size:1.4rem;
}

main>div{
    max-width:800px;
    margin:20px;
    aspect-ratio:2/1;
    padding:20px;
    border:5px solid black;
}

aside {
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap:10px;
}

aside>div{
    background-color:red;
    aspect-ratio:2/1;
}

/*Tablet view*/
@media screen and (min-width:768px) and (max-width:1023px) {
    /* aside {
        grid-template-columns: repeat(3,1fr);
        gap:7px;
    } */
    div {
        background-color:green;
    }
}

/*Mobile view*/
@media screen and (max-width:767px) {
    /* aside {
        grid-template-columns: repeat(2,1fr);
        gap:5px;
    } */
    html{
        font-size:16px;
    }
    div {
        background-color:yellow;
    }
}