@media screen and (max-width: 320px) {
    .app-icons {
        --grid-column-count: 4;
        --grid-column-padding: 3%;
    }
    .app-icons img {
        width: 2em;
        height: 2em;;
    }
}
@media screen and (min-width: 320px)  {
    /* smartphones, iPhone, portrait 480x320 phones */
    .app-icons {
        --grid-column-count: 4;
        --grid-column-padding: 3%;
    }
    .app-icons img {
        width: 3em;
        height: 3em;;
    }
}
@media screen and (min-width: 481px)  {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .app-icons {
        --grid-column-count: 6;
        --grid-column-padding: 3%;
    }
    .app-icons img {
        width: 3em;
        height: 3em;;
    }
}
@media screen and (min-width: 641px)  {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    .app-icons {
        --grid-column-count: 6;
        --grid-column-padding: 3%;
    }
    .app-icons img {
        width: 5em;
        height: 5em;;
    }
    .tab-deck {
        width: 80%;
    }
}
@media screen and (min-width: 961px)  {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .app-icons {
        --grid-column-count: 8;
        --grid-column-padding: 8%;
    }
    .app-icons img {
        width: 5em;
        height: 5em;;
    }
}
@media screen and (min-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */
    .app-icons {
        --grid-column-count: 8;
        --grid-column-padding: 10%;
    }
    .app-icons img {
        width: 5em;
        height: 5em;;
    }
}
@media screen and (min-width: 1281px) {
    /* hi-res laptops and desktops */
    .app-icons {
        --grid-column-count: 8;
        --grid-column-padding: 15%;
    }
    .app-icons img {
        width: 5em;
        height: 5em;;
    }
}
@media screen and (min-width: 1440px) {
    /* large desktops and hi-res screens */
    .app-icons {
        --grid-column-count: 10;
        --grid-column-padding: 20%;
    }
    .app-icons img {
        width: 5em;
        height: 5em;;
    }
}
@media screen and (min-width: 1920px) {
    /* desktop monitors */
    .app-icons {
        --grid-column-count: 12;
        --grid-column-padding: 20%;
    }
    .app-icons img {
        width: 5em;
        height: 5em;;
    }
}

.app-icons {
    display: grid;
    grid-template-columns: var(--grid-column-padding) repeat(var(--grid-column-count), 1fr) var(--grid-column-padding);
    gap: 2em 2em;
    margin: 1em;
}
.app-icons > * {
    width: fit-content;
    height: 100%;
    grid-column: var(--grid-column, 2) / span 2;
    border-radius: 20% / 20%;
    border-width: 2px;
    text-align: center;
    padding-bottom: 0.25em;
}
.app-icons-title {
    text-align: center;
}