Aetae

Ну какбэ очевидно, что вместо трёх колонок надо шесть и элементы, соответственно, двух и трёх колоночные.
Вообще же для такого лучше флекс подходит.

Если svg - то иконка - currentColor, самому svg - boreder-radius и background-color.
Чтобы currentColor работал - svg надо подключать как svg, а не img: либо всем кодом, либо через use href.
По hover, соответственно для svg меняется color и background-color.

Если используешь img - то менять тебе придётся две img местами.

Ещё, как извращение, можно заюзать filter: invert(1) на картинке самолёта.)

Если размеры зависят от экрана - просто используйте единицы измерения в vh или vw:

Если же размеры зависит от родителя, то тут придётся использовать трюк с canvas(или прозрачной гифкой - если по классике):

Можно кстати и обычной табличкой.)

Классический трюк c padding:

Потому что left - положение слева. У васleft: 100%, значит кружок рисуется слева начиная с 100% родителя.
Вам надо или использовать right: 0 вместо left: 100%, либо добавить margin-left: -10px, ну либо использовать left: calc(100% - 10px), где 10px - ширина кружка.

Просто не храните компоненты кучей в одной папке. Никто вам не запрещает создавать подпапки...

Ну вот смотри на примере той же button - каждый класс как-то модифицирует отображение кнопки. Каждый из этих классов может использоваться по отдельности и в любых сочетаниях. Ты просто один раз прописал эти классы, а дальше по необходимости накидываешь какие надо: одна кнопка так, другая эдак, ничего не дублируется ничего не надо заново выверять.
Как ты это собрался делать каскадом? Железно прописывать стили для каждой вложенности? Так завтра те бизнес скажет: "Передвинь кнопку на блок вниз и влево", и у тебя всё посыпется, придётся переписывать куски css. А после завтра попросят передвинуть весь блок и выровнять кнопку по правому краю. Опять всё переписывать.
Тащем абсолютно непродуктивно это.

Тут полноценный "мультик" на canvas. HTML, CSS и прочее тут особо не нужно, нужно знание мультипликации и умение оную в canvas впихнуть.)

занимает всю ширину блока

Не занимает. Что довольно очевидно, иначе её растянуло бы во весь блок.
Ставьте background родителю. Ну или извращайтесь с box-shadow\border\padding по бокам и overflow:hidden родителю.

Псевдоэлементом:


Ещё можно фильром или градиентом, но не нужно.

Как обычно - абсолютный div поверх и перепроверять позицию на каждый чих.

Нет. Абсолютно позиционированный элемент полностью выпадает из потока. Только javascript'ом.

Суть тут в том, что border нижнего span перекрывает border верхнего цветом фона, а в самом низу псевдоэлемент after благодаря разнице высоте и vertical-align отодвигает "перекрывающий" border ниже, открывая нужный нам.
Решение кажется довольно хрупким, но пока ничего иного на ум не пришло.

P.S. Обратите внимание, content не пустой, там zero width no-break space.

Можно clip-path, можно filter(matrix преобразующий альфу для конкретного цвета), можно mix-blend-mode.
Можно не вырезать дырку, а просто сделать div с очень большой полупрозрачной тенью, border или outline...
Можно использовать несколько background-image.
Ну или тупо 4 блока, как предложил xmoonlight .

Старые добрые флоаты: