.integrantes{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.integrante{
    /* background-color: #940315; */
    background-color: rgb(52, 58, 64);
    /* background-color: rgb(148, 3, 21); */
    margin: 2px;
    color: white;
    transition: background-color 1s linear;
    font-size: 0.9em;
}

.integrante:hover{
    /* background-color: rgb(52, 58, 64, .95); */
    background-color: rgb(148, 3, 21);
}

.integrante-nombre p{
    text-align: center;
}

.integrante-nombre p:nth-child(-n+2){
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1px;
}

.integrante-nombre p:nth-child(3n){
    display: none;
}

.integrante-datos{
    display: flex;
    padding: 5px;
    height: 100px;
}

.integrante-datos div:first-child{
    width: 35%;
}

.integrante-datos div:last-child{
    width: 65%;
}

.integrante div{
    padding: 5px;
}


.integrantes figure{
    overflow: hidden;
    height: 100%;
}

.integrantes .integrante-izq img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease-in-out;
}

.integrantes .integrante-izq img:hover{
    transform: scale(1.1) rotate(-1deg);
    /* transform: scale(1.2); */
}

.integrantes .integrante-der p{
    text-align: center;
}

.integrantes .integrante-der p:first-child{
    font-weight: bold;
}

.integrantes .integrante-der p:nth-child(1n+2){
    background-color: white;
    color: black;
    font-size: 0.7em;
    margin: 3px 2px;
    margin: 2px 10px;
}

.integrante .integrante-campos p{
    text-align: center;
    font-size: 0.9em;
}

@media (min-width:576px){
    .integrantes{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .integrante-datos{
        height: 150px;
    }

    .integrante-nombre p:nth-child(2n){
        display: block;
    }
    .integrante-datos div{
        width: 50%;
    }
    .integrantes .integrante-der p:nth-child(1n+2){
        font-size: 0.9em;
    }
}

@media (min-width:768px){
    .integrantes{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width:992px){
    .integrantes{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width:1200px){
    .integrantes{
        grid-template-columns: repeat(5, 1fr);
    }
}