/* A bit custom styling */
.my-page .ui-listview li .ui-btn p {
    color: #000000;
}
.my-page .ui-listview li .ui-btn .ui-li-aside {
    color: #000000;
}
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width: 48em ) {
    .my-page .ui-body {
        padding: 10px;
        margin: 5px 40px 5px 40px;
    }
    
    .ui-order-list {
        margin: 5px 40px 5px 40px;
    }
    
}
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width: 63.75em ) {
    .my-page .ui-body {
        padding: 10px;
        margin: 5px 40px 5px 40px;
    }
    .ui-order-list {
        margin: 5px 40px 5px 40px;
    }
}
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */