.section-proyectos {
    display: flex;
    flex-direction: column;
}

.campos-tabla {
    grid-column: 1/5;
    font-weight: 600;
}

/* SECCIÓN TE ITEM TABLA */
.item-tabla, .campos-tabla {
    color: black;
    border-bottom: 1px solid rgb(207, 207, 207);
    padding: 1rem 1rem;
    font-size: 1.3rem;

    cursor: pointer;

    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) 1fr 1fr;
    align-items: center;
}
.item-tabla:hover {
    background-color: #ebeff3;
    transition: 0.3s;
}
.item-tabla .nombre {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 600;
    align-self: start;
    align-self: center;
}
.item-tabla .nombre:hover {
    text-decoration: underline;
}
.titulo-btn-github {
    justify-self: end;
}
.item-tabla .btn-github {
    justify-self: end;

    max-width: 8rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    background-color: black;
    border: 1px solid black;
    color: white;
    border-radius: 3px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.cat {
    width: 100%;
    max-width: 8rem;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    font-weight: 900;
    border: 1px solid rgb(224, 224, 224);
    
    display: flex;
    justify-content: center;
}

.rgb-border {
    box-shadow: 0 0 4px #9900ff, 0 0 6px #00ffff, 0 0 8px #ffffff;
    animation: rgbGlow 2s linear infinite;
}

@keyframes rgbGlow {
    0% {
        box-shadow: 0 0 6px #9900ff, 0 0 8px #00ffff, 0 0 10px #ffffff;
    }
    33% {
        box-shadow: 0 0 6px #00ffff, 0 0 8px #ffffff, 0 0 10px #9900ff;
    }
    66% {
        box-shadow: 0 0 6px #ffffff, 0 0 8px #9900ff, 0 0 10px #00ffff;
    }
    100% {
        box-shadow: 0 0 6px #9900ff, 0 0 8px #00ffff, 0 0 10px #ffffff;
    }
}

/* ---------------------------------------------- */
@media (max-width: 768px) {
    .campos-tabla {
        display: none;
    }
    .item-tabla {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2,1fr);
        gap: 1rem;
    }
    
    .item-tabla .nombre, .item-tabla .stacks{
        grid-column: 1/4;
    }
    .item-tabla .btn-github, .item-tabla> * {
        max-width: none;
        width: 100%;
    }

}

@media (max-width: 480px) {
    
}