understanding svg css style - css

Question

I'm trying to understand how the css styling is working inside an svg here is an exemple of an svg i'm using:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> <defs>
<style>.cls-1{isolation:isolate;}.cls-2,.cls-3{fill:#ef8989;}.cls-3{mix-blend-mode:screen;}</style>
</defs>
<title>アセット 2</title>
<g class="cls-1">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</g>
</g>
</svg>
And here is how i'm trying to move the inline style to an external css file :
.cls-1 {
isolation : isolate;
}
.cls-3 {
mix-blend-mode : screen;
fill : #ef8989;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
<g class="cls-1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/>
<polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</svg>
Obviously there is something I don't understand on how to translate inline style to CSS style, my guess is that my issue is around here: .cls-1{isolation:isolate;}.cls-2,
I must have something to specify for the class cls-2 but didn't manage to get my head around this.
Thanks for any clarification and sorry if the question has been already asked couldn't find anything about it.
Matth

Answer 1

You forgot .cls-2, for the fill color.
Coma separated selectors in CSS means they all get the following defined styles.
.cls-1{
isolation:isolate;
}
.cls-2,
.cls-3{
fill:#ef8989;
}
.cls-3{
mix-blend-mode:screen;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> <defs>
</defs>
<title>アセット 2</title>
<g class="cls-1">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</g>
</g>
</svg>