/*******************/
/* UI ESTILO MACOS */
/*******************/

@media (min-width: 800px) {
    #macos-ui main {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, 120px);
        grid-auto-rows: 140px;
        gap: 20px;
        direction: rtl;
    }

    #macos-ui main > a {
        color: white;
        text-decoration: none;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #macos-ui main > a > img {
        height: 50px;
    }
    #macos-ui main > a > p {
        text-align: center;
        font-size: 13px;
    }
    @media (min-width: 771px) {
        #macos-ui > main > a > img {
        height: 75px;
        }
        #macos-ui > main > a > p {
            text-align: center;
            font-size: 15px;
        }
    }
    @media (min-width: 2000px) {
        #macos-ui > main > a > img {
        height: 85px;
        }
        #macos-ui > main > a > p {
            text-align: center;
            font-size: 16px;
        }
    }
}

/*****************/
/* UI ESTILO iOS */
/*****************/

@media (max-width: 799px) {
    #ios-ui main {
        flex: 1;
        min-height: 0;
        display: grid;

        /* 4 columnas exactas */
        grid-template-columns: repeat(4, 1fr);

        /* 6 filas exactas */
        grid-template-rows: repeat(6, 1fr);
        
        gap: 10px;
    }
    #ios-ui main > a {
        color: white;
        text-decoration: none;

        display: flex;
        flex-direction: column;

        /* alineación */
        align-items: center;
        justify-content: center;
        color: black;
    }
    #ios-ui main > a > img {
        height: 90px;
        border-radius: 20px;
    }
    #ios-ui main > a > p {
        text-align: center;
        font-size: 16px;
        margin-top: 5px;
    }

    @media (max-width: 455px) {
        #ios-ui main > a > img {
            height: 80px;
        }
        #ios-ui main > a > p {
            font-size: 14px;
        }
    }
    @media (max-width: 400px) {
        #ios-ui main > a > img {
            height: 70px;
        }
        #ios-ui main > a > p {
            font-size: 12px;
        }
    }
}