Алексей Уколов

Это стандартное поведение. Вам нужно наоборот выпилить какие-то свои стили, которыми вы это поведение сломали.

Покручиниться полчасика и придумать другое решение, которое не требует неподдерживаемой в браузерах функциональности. Оберните input в div, например.

Через img или background-image?

Если это контент - img, если украшение - background. Касается любых изображений, не только баннеров.

Работает, просто очень ненадёжно, от каждого неосторожного движения может сломаться, да и вообще лучше так не делать.
https://codepen.io/alexey-m-ukolov/pen/rpdVWm

Убрать white-space: nowrap, разумеется.

В комментариях же всё объясняется:

.row:hover {
  // Next row, slides are above their columns, giving downward motion on hover
  & ~ .row .slide { transform: translateY(-100%); }
  
  // Current row, slides to the right of their columns, giving left motion on hover
  .slide { transform: translateX(100%); }
  
  // Current row, next slides, slides to the left of their columns, giving right motion on hover
  & .col:hover ~ .col .slide { transform: translateX(-100%); }
  
  // Current slide
  .col:hover .slide {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
}

Коротко говоря, всё на селекторах.

Большинство email-клиентов просто проигнорируют ваш внешний css-файл. Добавьте правила прямо в html, как при обычной вёрстке писем.
Также шрифты нужно перенести на протокол HTTPS, добавить корректный SSL-сертификат и убедиться, что на сервере настроены корректные cross-origin-заголовки.

Два разных селектора, к которым применяется одно правило. Альтернативная запись:

:indeterminate { background: limegreen; }

:indeterminate + span { background: limegreen; }

Пока такое невозможно, но в четвёртой версии спецификации появится:

li:has(~ .hover:hover) {
  color: red;
}

Проблема в этом правиле:

* {
  overflow-x: hidden;
}

Вообще, это очень плохая практика - сбрасывать таким образом какие-то правила. Это явный признак того, что человек не понимает, что происходит у него в CSS и борется сам с собой при помощи костылей. Учитесь, экспериментируйте, разбирайтесь почему работает так, а не иначе. На костылях и Тостере далеко не уехать.

У стилей внутри медиазапросов нет какого-то волшебного приоритета над прочими, к ним применимы те же самые правила. Конкретно в данном случае - применяется последнее объявленное правило среди максимально специфичных. Селектор section ... .application input гораздо более специфичный, чем просто .application input, поэтому правила перекрываются.

Вот простой пример: https://codepen.io/alexey-m-ukolov/pen/EbeZvY?edit...

P.S.

Не работают медиа запросы

Медиа-запросы работают, проблема в другом.

браузер жалуется

Не жалуется, а наглядно показывает, какие правила применяются, почему и откуда они взялись.

выше (не в медиа даже) указаны другие свойства

Свойства могут быть указаны и ниже по коду, браузер в этой панели сортирует правила по специфичности селектора.

Надо. Это не вмешательство в контент — это часть контента и к адаптивности не имеет никакого отношения.
Хотя, если вы таким образом костыли в вёрстку ставите, то не надо.

Что это за бордер при клике?

https://webref.ru/css/outline

как сделать заполнение не квадратное?

Не видя код ответить невозможно.

свои сайты не могу выложить по причине того, что уже отсидел в бане за это целых два месяца

Посмотрел ваши вопросы и ответы - не вижу ничего криминального, кроме выкладывания ссылки на сайт через сокращатель зачем-то. В любом случае, вы совершенно спокойно можете подключить на jsfiddle все ваши css, создать минимальную разметку и проблема станет воспроизводиться и там.