#containerDiplomas .buttonFilters {
    padding: 10px;
    border: 1px solid var(--gray);
    border-radius: 4px;
}
.contentContainer, 
#diplomas .contentDiplomas {
    display: grid;
    grid-template: auto / repeat(4, calc(97% / 4));
    column-gap: 1%;
    row-gap: 1%;
    padding-bottom: 30px;
}
.diplomaBox {
    border: 1px solid var(--gray);
    border-radius: 4px;
    padding: .8em;
    box-shadow: 0px 0px 5px #00000021;
    display: grid;
    /* Si en el valor de las siguientes dos propiedades esta en porcentaje, se va a salir del contenedor a menos que al contenedor le de un height definido. Es mejor usar pixeles */
    grid-template: 30px 1fr / auto;
    row-gap: 10px;
}
.diplomaBox .diplomaBoxImg {
    height: 250px;
    width: 100%;
}
.diplomaBox img.diplomaBoxImg {
    object-fit: cover;
}
.diplomaBox .diplomaBoxNombre a {
    color: var(--black);
    text-decoration: none;
    transition: all .3s;
}
.diplomaBox .diplomaBoxNombre:hover a,
.diplomaBox .diplomaBoxNombre:focus a,
.diplomaBox .diplomaBoxNombre:active a {
    color: var(--blue);
}
.diplomaBox .diplomaBoxEscuela img {
    width: 30px;
    border-radius: 50px;
    object-fit: cover;
}