Ankhena

Вот ваши пробелы

Потому что у вас в коде перепутан порядок элементов.
.a ~ .b найдет b, перед которыми есть .a

Т.е. инпут и лейбл нужно поменять местами.

$lg: 720px;

@mixin _lg {
  @media (min-width: $lg) {
    @content;
  }
}

.tt {
color: red;
@include _lg {
      color: green;
    }
}

Во-первых, потому что нет элемента с классом big в разметке.
Во-вторых, потому что в значениях свойства grid-row слово row не участвует. Только числа или span.
В вашем случае там должно быть написано span 2 или 5/7

*:focus, *:active {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

overflow: hidden; для .MarketingNameCell__name-container
Но проверьте во всех браузерах.

Либо для .MarketingNameCell__name-container не max-width: 100%,а

max-width: calc(100% - отступы и ширина двух иконок)

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

Задайте z-index: 0 для fancybox-inner

1. Раз уж псевдо у вас имеет inline-block, то можно задать ему vertical-align: middle
2. Либо задайте для родителя флекс и align-items: center
3. Удалить псевдо и задать фон стрелкой прямо для кнопки и bg position

Позиционируйте кнопку абсолютом (или гридом) в правый нижний угол. Псевдоэлементом перед ней добавьте многоточие.
Фоном задайте фон блока.
Следите за тем, чтобы ширина блока была больше, чем кнопка + многоточие + симпатичное расстояние, чтобы всё это не выглядело по-уродски.

Для элемента с классом data_text применяется свойство margin-bottom

Применяется.
Но не туда, где вы его ждете.
Погуглите про эффект "схлопывание и выпадение вертикальных margin"
htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvay...

p.s. проверяйте свой код валидатором. Между атрибутами не должно быть запятых.

Сначала нужно сделать так, чтобы card-body стали одинаковой высоты.
А то отступ auto вы задали, только чтобы его применить в блоке нет свободного места.
Либо вообще удалить эту обертку, если макет позволяет.

И эту card-body тоже. Тогда хоть флекс для courses__blc перестанет быть бессмысленным.

Если тяжело работать с инструментами разработчика, можно обводить блоки рамочками. Так будет понятнее, что у вас вообще происходит.

Гугл к сожалению не помог...

Так далеко не нужно было ходить.
Достаточно открыть демки в документации
https://swiperjs.com/demos#thumbs-gallery

Можно спросить, зачем вы вообще сложили их в container?
Уберите лишнюю обертку и всё.

Не понятно, почему его нужно скрыть, если вам нужен вертикальный.
И max-width точно никто не отменял.

Давайте начнем сначала: на вашем скине нет ни одного тега img.
Ни одна из картинок не является контентной.
Их всех хорошо бы убрать в стили, фоном или фоном псевдоэлементов.

Ну и тогда ваш вопрос отпадет сам собой: текст всегда поверх фона.

Пример переключалки темной-светлой темы
https://codepen.io/AnnaSummer/pen/oNEoeqY