szQocks

проблема в том что внутри .program__link , нет элемента с классом .active

и там ещё опечатка где между классом и after

.program__link .active ::after

оставь просто .active::after в css

потому что у тебя у блока info стоит flex-direction: column; ( вертикальная ось ) в которой за расположением высоты элементов уже отвечает justify-content - а значение по умолчанию у justify-content является flex-start, по факту если указать блоку info justify-content: stretch он должен элементы флекс контенера распределить так что бы высота у элементов занимала всё пространство, но по какой-то причине этой магии не происходит, зато если указать блоку .list явно что он должен занимать пространство всё относительно свой оси, а если он является вертикальная то flex: 1 1 0; - даст блоку возможность занимать всю высоту

<div class="container">
  <div class="div2">
    <code>&lt;a&gt;&lt;/a&gt;</code>
    <p>ссылка</p>
  </div>
</div>

.container{
    margin: 50px auto;
    display: flex;
    justify-content: center;
    width: 500px;
}
.div2{
    background-color: #c8a185;
    color: #30464f;
    flex-shrink: 0;
    width: 110%;
}

демо

<div>
  <span>123</span>
  <p>Какой-то текст</p>
</div>

body{
  background: gray;
}

div{
  margin: 50px auto;
  width: 200px;
  height: 140px;
  background: radial-gradient(40px 40px at center top, transparent 100%, red 100%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 20px;
}

span{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  color: firebrick;
  background: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -32px;
}

Попробую расписать о том как работает z-index.

К примеру есть 2 дива c разным z-index, по умолчанию у них нет контекста стекирования потому что по умолчанию у них position: static; - а это позиционирование не создаёт контекст для z-index, и не важно сколько бы был z-index у .gg, нижний блок всегда будет его перекрывать, а если бы у них бы был контекст и одинаковый z-index то перекрывал бы нижний в иерархии html элемент

<div class="gg"></div>
<div class="tt"></div>

а вот и стили к ним

.gg{
  z-index: 999;
  width: 100px;
  height: 100px;
  background: red;
}

.tt{
  z-index: 2;
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
}

Из документации сказано в каких случаях создаётся контекст стекирования
1 - является корневым элементом (то есть HTML)
2 - позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto"
3 - flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex или display: inline-flex;
4 - display: inline-flex;
5 - элементы с opacity меньше чем 1
6 - элементы с transform отличным от "none"
7 - элементы с mix-blend-mode значением отличным от "normal"
8 - элементы с filter значением отличным от "none"
9 - элементы с isolation установленным в "isolate"
10 - position: fixed;
11 - если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения
12 - элементы с -webkit-overflow-scrolling (en-US) установленным в "touch"
13 - grid элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: grid

Если нужно что бы .gg - перекрывал нижний по иерархии html элемент, мы можем задать для .gg - один из перечисленных вариантов, например display: inline-flex; или position: relative; или же задать например родителю этих двух блоков display: flex; flex-direction: column; ( и блоки .gg .tt раз они станут флекс элементами то и z-index будет работать между ними, несмотря на то какой из них ниже а какой выше в иерархии html )

----------------------------------------------------------------------------------------------- -------------------------

Следующий пример который как раз таки возможно даст тебе понять о том как работает наконец таки z-index у детей.

Добавим потомка для дива с классом gg в данном случае это див с классом gg__children

<div class="gg">
  <div class="gg__children"></div> // потомок
</div>
<div class="tt"></div>

а вот и стили

.gg{
  width: 100px;
  height: 100px;
  background: red;
  z-index: 999;
}

.gg__children{
  width: 50px;
  height: 200px;
  background: green;
  z-index: 100;
}

.tt{
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
  z-index: 2;
}

так вот сколько угодно можно задавать потомку z-index , он всё равно выше z-index родителя прыгнуть не сможет,
а раз его родитель .gg - не имеет свой контекст и раз он находится выше в иерархии html то и соответственно .tt перекроет их всех

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

Документация