Ankhena

Например, так

$md: 720px;
@mixin _md {
  @media (min-width: $md) {
    @content;
  }
}

.block {
  color: red;

  @include _md {
    color: blue
  }
}

Почитайте про unicode-range, браузер сам разберется.
Краткая суть такая: если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

https://developer.mozilla.org/en-US/docs/Web/CSS/@...

.block {
  $this: &;
  &__element:hover {
  #{$this}__element-sub {
    color: red;
  }
 }
}

$lg: 720px;

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

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

Z-index в принципе работает не так, как хотелось бы большинству (мне впрочем тоже), потому что существует такая штука как контекст наложения.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya

Чтобы псевдо был под ссылкой, ему нужно задать z-index: -1, а у самой ссылки убрать вовсе.

Нужно экранировать
max-width: #{'min('}50%, 1100px#{')'}

Или целиком всю строку width: #{'min(50%, 1100px#)'};, если без затей с переменными и т.п.

Можно оставить как есть.

Можно переписать так:

.parent__child {
  background: gray;
  @media (max-width: 777px) {
    background: orange;
    
    .parent--custom & {
    background: red;
  }
 }
}

можно так:

.parent__child {
  background: gray;
  @media (max-width: 777px) {
    background: orange;
  }

  .parent--custom & {
    @media (max-width: 777px) {
      background: red;
    }
  }
}

А совсем хорошо вот так:

.parent__child {
  --color: gray;
  background: var(--color);
  @media (max-width: 777px) {
    --color: orange;
  }

  .parent--custom & {
    @media (max-width: 777px) {
      --color: red;
    }
  }
}

@mixin superVar($var, $number, $vh, $vw) {
  @media (min-aspect-ratio: 2/1) {
    #{$var}: $number * $vh;
  }
  @media (max-aspect-ratio: 2/1) {
    #{$var}: $number * $vw;
  }
}
.frame {
  @include superVar(--superVmin, 1, 2vh, 1vw);
  width: calc(10 * var(--superVmin));
  height: 10vmin;
  background: red;
}

1. В CSS десятичные дроби пишутся через точку, а не через запятую.
2. При возможности округляйте до целых значений.
3. Вложенность больше 2 не очень хорошо сказывается на поддерживаемости кода.

Можно использовать гриды. Контейнер с высотой 100vh и 2 строки. min-content и 1fr

Потому что вы забыли & перед :hover

&:hover {}

Неправильный порядок свойств в собранном CSS.
media должны быть после обычного состояния.

1. На JS
2. Применять стиль не к обертке, а к псевдо от лейбла. Этот псевдо сделать абсолютом, а релатив задать обертке.
Тогда визуально будет казаться, что покрасилась обертка.

Модификатор не может быть единственным классом, он всегда сопровождает класс блока или элемента.
Иначе он перестанет быть модификатором в прямом смысле этого слова.

У меня банальный вопрос, вы

<meta name="viewport" content="width=device-width">

прописали?

В песочнице ваш код работает https://jsfiddle.net/z4quLpb3/1/
Значит, если дело не в мета, то нужно показывать весь код или самостоятельно посмотреть что выходит в css и прогнать его через валидатор.

В общем случае так: https://jsfiddle.net/5rb3hdc6/

Смешно, но проще всего это решается на флоатах
https://codepen.io/anon/pen/mzrPoa

Вариант с order возможен, но заморочист при текущей разметке.
И тогда удобнее в обратном порядке.
Первой должна идти картинка, потом заголовок и текст.
Выстраиваются они с помощью columns в 2 столбца.
А когда в один столбец, вот тогда уже order.