/* mobile-first layout */

/* Small phones */
@media (min-width: 50px) {

    /* grid */

    .grid-container-3x3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 1em;
        padding: 1em;
        border-radius: 1em;
        background-color: var(--blue-gray-100);
    }

    .grid-container-3x3 li {
        border: 1px solid #ccc;
        padding: 0.5em 1em;
        border-radius: 0.5em;
        /*background-color: var(--blue-gray-400);*/
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #align-items-items, #place-items-items {
        height: 400px;
    }

}

/* Large phones */
@media (min-width: 480px) {
    
}

/* Small tablets / large phones */
@media (min-width: 600px) {

}

/* Tablets */
@media (min-width: 768px) {

    .grid-container-3x3 li {
        padding: 1em 2em;
    }

}

/* Small laptops */
@media (min-width: 1024px) {


}

/* Desktops */
@media (min-width: 1280px) {


}

/* Large desktops / wide monitors */
@media (min-width: 1536px) {
    
}