Hallo Tommy,
Wie ich vorhin schon geschrieben hatte, müsste ich mich wochenlang einarbeiten, um das zu verstehen und ggf. weiter anpassen zu können.
Leider kann ich Dich da nicht recht trösten. CSS ist eine umfangreiche Angelegenheit, und für ein responsives Layout benötigst Du einiges davon.
Die gute Nachricht ist: Viele meiner Spielereien aus dem Fiddle brauchst Du nicht. Im neu aufgelegten Fiddle habe ich die Flexbox und das ::before/::after wieder entfernt.
Mittels ::before und ::after habe ich mit CSS Pseudoelemente erzeugt, um Flaggen draus zu machen.
calc ist ein wichtiges Werkzeug. Gelegentlich muss man Größen berechnen, dafür dient calc. Das brauchte ich aber nur für die Platzierung der ::before/::after Pseudoelemente.
Gradienten kann man verwenden, muss man aber nicht. Deine Frankreichfahne war ein img Element. Nur hatte ich dafür keine URL. Darum habe ich es mit einem Lineargradienten (=Farbverlauf) in einem div simuliert.
Rolf
sumpsi - posui - obstruxi