@media screen and (min-width: 768px) {

    /* HOME
    ============== */
    .home.grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .home.grid > div:nth-child(7),
    .home.grid > div:nth-child(8),
    .home.grid > div:nth-child(9) {
        display: flex;
    }    

    .brand img {
        width: 50%;
    }
    
    /* PORTAL
    ============== */
    .content {
        padding: 0 30px;
    }

    .portal .grid {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 150px);
    }

    .portal .grid > div:nth-child(1) {
        height: auto;
    }

    .portal .grid > div:nth-child(3),
    .portal .grid > div:nth-child(4) {
        display: block;
    }

    .portal .grid > div:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 3 / -1;
    }

    .portal .grid > div:nth-child(4) {
        grid-column: 3 / -1;
        grid-row: 3 / -1;
    }

}

@media screen and (min-width: 992px) {
    /* MENÚ 
    =============== */
    
    .menu-mobile .link {
        display: none;
        font-size: 18px;
    }

    .menu-content {
        opacity: 1;
        pointer-events: auto;
    }

    .menu-mobile {
        grid-row: auto;
        grid-column: auto;
    }

    /* HOME
    =============== */
    .brand {
        grid-row: 2 / 3;
    }
    
    .home.grid,
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .home.grid > div:nth-child(2) {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }
    
    .home.grid > div:nth-child(10), 
    .home.grid > div:nth-child(11), 
    .home.grid > div:nth-child(12) {
        display: flex;
    }

    /* PORTAL 
    ==================*/    
    .content { 
        padding: 0 70px;
        text-align: left;
        line-height: 24px;
        font-size: 18px;  
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media screen and (min-width: 1200px) {
    /* PORTAL
    =================== */
    .portal {
        display: flex;
        height: 100vh;
        padding: 0;
    }

    .portal > div {
        flex: 50%;
    }

    .portal .grid {
        grid-template-rows: repeat(6, 1fr);
    }

    .portal .grid > div:nth-child(2) {
        display: block;
        grid-column: 1 / 3;
        grid-row: 3 / -1;
    }

    .portal .grid > div:nth-child(3) {
        grid-column: 3 / -1;
        grid-row: 3 / 5;
    }

    .portal .grid > div:nth-child(4) {
        grid-column: 3 / -1;
        grid-row: 5 / -1;
    }
}