xdevelx

Если только css, то subgrid + немного магии :has
https://codepen.io/xdevelx/pen/bGJaYVV

P.S. По поводу поддержки браузеров я бы сильно не беспокоился - без поддержки сабгридов верстка не сломается. Вполне себе progressive enhancement. Можно добавить @supports (в примере есть)

animation сбрасывает animation-delay в значение по-умолчанию — 0.

:root {
  --transition-duration: 2s;
  --animation-duration: 5s;
}

div {
  width: 100px;
  height: 100px;
  background: red;
  opacity: 0;
  transition: opacity var(--transition-duration);
  will-change: transform, opacity;
}
div:hover {
  animation: mymove var(--animation-duration) var(--transition-duration)
    infinite;
  opacity: 1;
}

@keyframes mymove {
  to {
    transform: translateX(200px);
  }
}

Как найти элементы 1, 4, 6, 9, 11, 14

:nth-child(5n + 1),
:nth-child(5n + 4) {
}

2, 5,7, 10, 12, 15

:nth-child(5n + 2),
:nth-child(5n) {
}

https://codepen.io/xdevelx/pen/xxaqvOd

.spoiler-link--active::before {
  transform: rotate(90deg);
}

Вот такой вариант
https://codepen.io/xdevelx/pen/OJEGaoe

label:has(+ .field-error) {
  border: 2px solid red;
}

https://codepen.io/xdevelx/pen/wvXmqvz

Но нужно смотреть поддержку браузеров https://caniuse.com/css-has
Если не устроит, то js

css.yoksel.ru/svg-sizes

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется

Отсюда вывод: если нужны размеры, указывайте их. Да, так банально

<svg width="18" height="19"><use xlink:href="#exit"></use></svg>

https://codepen.io/xdevelx/pen/YzvPwYz

.sidebar-mini:not(.sidebar-collapse) .nav-treeview .nav-link {
  margin-left: 1rem;
  width: calc(250px - 2rem);
}

Специфичность селектора такая, чтобы переопределить уже существующие значения.

.uk-navbar-nav {
  flex-wrap: wrap; 
}

Зачем для body задан display: grid, если внутри только один элемент - container? Уберите grid для body и все станет на место.

P.S. контейнер не для того используется - он нужен для каждой секции. Для всей страницы его делать не нужно.

Width и height не работают для inline элементов. Задайте display: inline-block

https://codepen.io/xdevelx/pen/LYzPBWz

.example {
    /* color: #c4674d; */
    transition: color 0.3s;
}

.example:hover {
    color: #ff8562;
}

Мета тег color-scheme и медиа запрос prefers-colors-scheme samsung internet поддерживают https://developer.samsung.com/internet/blog/en-us/... Но есть одно но - чтобы это все заработало нужно в настройках браузера выбрать labs и там чекнуть использовать темную тему сайта и тогда при добавлении <meta name="color-scheme" content="light dark"> тема будет всегда не инвертированная. Но если у пользователя выбрана темная тема без выбора этой настройки в телефоне, он будет видеть инверсию. И с этим ничего сделать нельзя.