* {
    box-sizing: border-box;
    margin: auto;
}

#marca {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    padding: 20px;
}

#marca .porfolio-info {
    padding: 10px;
    padding-bottom: 10px;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    color: #2b2b2b;
}

#marca .porfolio-info h1 {
    margin-top: 100px;
    text-align: center;
    font-weight: 200;
    justify-content: center;
}

#marca .porfolio-info p {
    text-align: left;
    padding: 20px ;
    text-align: justify;
    font-size: 14px;
}

#marca .imagen-principal {
    width: 50%;
    align-items: right;
    display: flex;
    flex-wrap: wrap;
}

#marca {
    display: flex;
    flex-wrap: wrap;

}

#marca img {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}

#imagenes {
    margin-bottom: 50px;
}

#imagenes img {
    width: 100%;
    height: 33%;
    object-fit: contain;
    border-radius: 20px;
}

#imagenes .row {
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

#imagenes .column {
    flex: 50%;
    padding: 5px;
}

#imagenes .column img {
    margin-top: 5px;
    margin-bottom: 5px;
}

#imagenes img:hover{
    cursor: pointer;
    opacity: 0.3;
}

@media (max-width:480px) {

    #marca {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    #marca .porfolio-info {
        width:100%;
        display: flex;
        flex-wrap: wrap;
    }

    #marca .imagen-principal {
        width: 120%;
        display: flex;
        flex-wrap: wrap;
    }

    #imagenes .column {
        flex: 90%;
        display: flex;
        flex-wrap: wrap;
        width: 90%;
    }

}

@media (min-width:780px) {
    #imagenes .column {
        flex: 50%;
        width: 90%;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
    }

    #imagenes img {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
    }

    #imagenes {
        margin-bottom: 180px;
    }

    #marca {
        display: flex;
        flex-wrap: wrap;
        width: 90%;
    }

    #marca .porfolio-info {
        width: 50%;
    }

    #marca .imagen-principal {
        width: 50%;
    }
}

@media (min-width:1024px) {
    #imagenes .column {
        flex: 20%;
        width: 90%;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
    }

    #imagenes img {
        width: 30%;
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        
    }  
}