綺麗なマークアップができていてとても良いと思います！
スタイリングに関しても display: flex や一括指定プロパティなども適切に使えていて無駄のないモダンなコードになっていて良いと思います！

改善できそうな点を下にコメントしたので確認してみてください。
次の研修はCSSのリファクタリングになるので、改善できそうなところはぜひ試してみてください！

---

https://github.com/pr-song/kenshu-frontend/blob/4190f1049afbd542270be5e45a2f3c948c22bc68/index.html#L90-L93

ranking-img-div というクラス名ですが、ここは div に限らず span や header などの他の要素でもスタイリングできるため、要素名を含めたクラス名は避けたほうが良いです。
今回の場合 ranking-img-wrapper などにすると良いかと思います！

クラス名の付け方などはあとの研修で学習できるので、そのときに慣れていければ良いと思います！

---

右の margin により若干デザインがずれてしまっています。
隣接兄弟結合子(+)や:last-child 擬似クラスなどを用いて解消すると良いと思います！

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_combinator
• https://developer.mozilla.org/ja/docs/Web/CSS/:last-child

---

position: absolute を使用している場所が多いですが、 position: absolute は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されないので、多用しすぎると要素の位置関係が複雑になり管理しづらくなるので、要素の上に要素を重ねたい場合など、特殊な位置に要素を配置したいとき以外はあまり使わない方が良いかと思います！

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/position

---

細かいですが、リンクは a タグにしか反応しないので、li タグに padding や background のスタイルを指定すると、クリックできる部分が見た目より狭くなってしまいます。
この場合は a タグにスタイリングをするなどの工夫が必要になります。

総評

BEM のルールにしたがって綺麗にマークアップできていて、Block / Element / Modifier の分け方もわかりやすく、クラス名も明確でとても良いと思います！

改善点

変数について

細かいかもしれませんが、変数は _variables.scss などにまとめて、style.scss の最初などで読み込むことで、全ファイル共通で使えるようになるので、別ファイルに切り出すと良いと思います！

今回の規模の場合はファイルごとに書いても全然問題ありませんが、今後大きなコードを扱うときは活用してみてください。

https://github.com/pr-song/kenshu-frontend/blob/53fb16b65884ee41b77978fb15d21bfe3c65164c/src/sass/_header.scss#L1

https://github.com/pr-song/kenshu-frontend/blob/53fb16b65884ee41b77978fb15d21bfe3c65164c/src/sass/_footer.scss#L1

---

共通スタイルについて

こちらも細かいですが、共通のスタイルも_common.scssや_config.scssなどにまとめるとコードがすっきりすると思います。
style.scssに共通スタイルを書いた場合、共通スタイルが大きくなった場合にどのファイルをimportしているかがわかりづらくなってしまします。

こちらも今回の規模であれば全然問題ありませんが、今後活用してみてください。

https://github.com/pr-song/kenshu-frontend/blob/53fb16b65884ee41b77978fb15d21bfe3c65164c/src/sass/style.scss#L2-L20