[AYUDA] CSS círculo dentro de otro con filtros sin herencia

Necesito saber cómo puedo tener un círculo dentro de otro, centrados, los cuales están dentro de un div flex y no quiero que se salga de su espacio. (Esto está hecho)
El problema lo tengo porque el div grande, el padre, tiene un filtro el cual aplica también al hijo y no quiero eso, quiero que el padre tenga una opacidad y el hijo otra. Pero no consigo hacer que el hijo no herede el filtro del padre.
La idea es algo así:

.bloqueDatos .imagen {
                display: flex;
                flex-grow: 1;
                border-radius: 50%;
                justify-content: center;
                align-items: center;
            }

.bloqueDatos .imagen .grande {
                position: relative;
                border-radius: 50%;
                width: 150px;
                height: 150px;
                background-image: url(data:image/jpeg;base64,/...);
                background-position: center;
                background-size: contain;
                filter: grayscale(100%);
                border: 20px solid #211915;
            }

 .bloqueDatos .imagen .peque {
                transform: translate(25%, 25%);
                border-radius: 50%;
                width: 100px;
                height: 100px;
                background-image: url(data:image/jpeg;base64,/...);
                background-position: center;
                background-size: contain;
                border: 20px solid #71182c;
            }