flocss設計でのレイアウトとobjectのそれぞれの区別がわかりません

前提

FLOCSSの設計法でheader部分のマークアップを行っていたのですが
早々classの命名で躓いております。レイアウト、コンポーネント、プロジェクトの理解がこんがらまくっています。私のコードの解釈は合っているのかわからず皆様のご意見いただきたく質問致しました。

教えていただきたいこと

componentとprojectの多小なりと解釈が異なるのはひとそれぞれあるかとは思うのですが、私はレイアウトの定義も曖昧なので下記コードのレイアウト、objectの部分において不明点を記載いたしますので、アドバイスいただければ幸いです。

componentとprojectのルール

このPowerPointの図形を使って以下のようにcomponentとprojectを定義しました。
component：パワポの図形１つの単位
project：グループ化して動かす単位

私はこちらの考え方でobjectの解釈をしております。
https://qiita.com/uggds/items/d904b2f9a103c37a25fa

例題のソースコード

html

<!-- .l-header --> <header class="l-header"> <div class="c-inner"> <div class="l-header__content"> <a href="" class="l-header__logo"> <img src="./asset/img/header-logo.svg" alt=""/> </a> <a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a> </div> </div> </header> <!-- /.l-header -->

私が書いたコード

html

　　　　　　<!-- .l-header --> <header class="l-header"> <div class="c-inner"> <div class="p-container"> <a href="" class="c-logo"> <img src="./asset/img/header-logo.svg" alt=""/> </a> <a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a> </div> </div> </header> <!-- /.l-header -->

解説しますと

• l-headerはヘッダー、メインコンテンツエリア等のレイアウト部分のスタイル

• c-innerをcにしたのはインナー部分1つの最小単位。

• p-containerにしたのは c-buttonとc-logoをまとめたグループ化した部分。l-header__contentここがレイアウト部分なのか..なぜ筆者はレイアウトにしたのか

• c-logo　一つの単位と捉えた。l-header__logoここレイアウトなんですか??

• c-button 一つの単位と捉えた。ここは参照コード一緒なのか。とするとc-logoはなぜレイアウトなのかもっと深みにはまる。

補足情報

https://traveler20.github.io/practice/00/
こちらのサイトのheaderを参照しております。
https://zenn.dev/yurukei20/books/10e7322a762178/viewer/fae4c0
解説