Сергей delphinpro

Как-то так

-<input type="radio" id="img1" name="images" checked>
 <label for="img1">
+   <input type="radio" id="img1" name="images" checked>
    <span>Image1</span>
    <i class="fa fa-sort-desc" aria-hidden="true"></i>
    <img src="..." alt="Img1">
 </label>

label{
   cursor: pointer;
   width: 100%;
+  display:flex;
+  align-items:center;
+  flex-wrap: wrap;
}
.fa{
-  float: right;
+  margin-left: auto;
}

ul {
   list-style-position: inside;
}

.element {
  /* width: calc(33.3% - 20px); */
  width: calc((100% - 20px * 2) / 3);
  height: 50px;
  background: black;
}

Или сделать так:

.container {
  width: 500px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid green;
}

.element {
  height: 50px;
  background: black;
}

Нет, нельзя

Но можно отобразить текст после загрузки картинки.

<div class="block">
  <img src="..." onload="this.classList.add('loaded')">
  <span>Текст поверх картинки</span>
</div>

.block {
  position: relative;
}
.block span {
  position: absolute;
  display: none;
}
.block img.loaded + span {
  display: block;
}

Зачем удалять? Просто делайте прозрачными (opacity: 0)

.tabs:has(#tab-btn-1:checked) > #content-1 {
  display: block;
}

PS https://caniuse.com/css-has

Абсолюты убрать.

.topbar-city {
  display: flex;
  gap: 2rem;
}

Абсолюты вообще не используйте никогда. Только для выпадающих элементов, для размещения декоративных элементов и тому подобные случаи.

button {
  background: #625AFB;
  color: #ffffff;
}

На компе можно просто держать консоль открытой (не забыть там включить галочку Disable cache, которая на вкладке Network)
На телефоне можно открывать страницу в приватной вкладке, правда после изменений вкладку придется переоткрывать.

А можно каждый раз менять URL загружаемых ресурсов, добавляя рандомный параметр

<link href="styles.css?random_string">
В php
<link href="styles.css?<?=time()?>">

Можно менять параметр только если файл изменился.

<link href="styles.css?<?=md5_file(путь_к_файлу/styles.css)?>">
<link href="styles.css?<?=filemtime(путь_к_файлу/styles.css)?>">

У любого уважающего себя слайдера есть событие смены слайда, и в нем обычно можно получить индекс активного слайда. Будем плясать от этого.
Точки не обязательно смещать. Нужно просто разместить их по центру и прятать лишние. Таким образом активная точка всегда будет видна, и даже по центру (если не вначале/конце списка).

Вот, я накидал пример, как оно может быть реализовано.
Я не стал реальный слайдер вставлять, просто показал принцип. Функция update() – это как раз обработчик события смены слайда. Переменная visible - то, сколько точек вы хотите сделать видимыми.

А смысл? Условие (max-width: 640px) and (min-width: 641px) никогда не выполнится.
Экран не может быть одновременно меньше 640 и больше 641

Значения hidden и visible не совместимы по разным осям. Если по одной оси задан hidden, то по другой возможен только hidden или scroll. Иначе говоря, visible можно задать только для обеих осей одновременно.

<div class="grid">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
    <img class="grid-item" src="">
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2px;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2) { grid-column: span 3; }
.grid-item:nth-child(3),
.grid-item:nth-child(4),
.grid-item:nth-child(5) { grid-column: span 2; }

Абсолютное позиционирование "вырывает" элемент из текущего потока и он не влияет на своих родителей в плане занимаемого места.