#valores{
    height: auto;
}

#valoresContainer{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

#valoresBannerTitle{
    width: 100%;
    height: 80px;
    display: grid;
    place-items: center;
}

#valoresGridContainer{
    width: 100%;
    display: grid;
    place-items: center;
    margin-inline: auto;   
    padding-block: 40px; 
}

#valoresGrid{
    width: 95%; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2%;
}

.valor{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    box-shadow: 0px 0px 10px 2px var(--color-sombra);
    border-radius: 30px;
    padding: 20px;
    background-color: var(--color-blanco);
}

.valorContainer{
    display: grid;
    place-items: center;
    text-align: center;
}

#valor_compromiso{
      border-bottom: 7px solid var(--color-verde);
}

#valor_solidaridad{
    border-bottom: 7px solid var(--color-gris);
}

#valor_educacion{
    border-bottom: 7px solid var(--color-rojo);
}

#valor_inclusion{
    border-bottom: 7px solid var(--color-azul);
}

#valor_respeto{
    border-bottom: 7px solid var(--color-amarillo);
}   
.icono_valor{
    padding: 20px;
    border-radius: 50%;
}

.fa-solid, .fas {
    font-weight: 1000;
    color: var(--color-blanco);
    font-size: 2em;
}

#valor_compromiso .icono_valor{
    background-color: var(--color-verde);
}

#valor_solidaridad .icono_valor{
    background-color: var(--color-gris);
}

#valor_educacion .icono_valor{
    background-color: var(--color-rojo);
}

#valor_inclusion .icono_valor{
    background-color: var(--color-azul);
}

#valor_respeto .icono_valor{
    background-color: var(--color-amarillo);
}