Полина Емельянова

Как вариант, если без магии с СВГ и прочими:
У блока с цифрой сделать выноску на ПСЕВДОЭЛЕМЕНТЕ и разместить ее ПОВЕРХ бордера.

&:before {
   content: "";
   position: absolute;
   top: 100%;
   left: сколько надо;
   height: 10px или сколько надо;
   width: 20px или сколько надо;
   background-color: #fff; // и это самое узкое место, т.к. измениться фон - будет видена эта выноска
   z-index: 2;
  }

Попытайся анимировать не собственно ширину или высоту а max-width/max-hiegth
Эти своства куда как проще анимируются.
Порядок действий - задать как ширину в 100%, и максимальную ширину, которая будет стартвой
На ховер (или как у тебя) - меняй максимальную ширину.
Плавнее должно быть.

Уберите высоту с html, body,
Проставьте min-height: 100%;

Немного наркомании к бдсм.))))

Вместо флекса попробовать флоаткуть картинку)

Боюсь на флексах такое сделать не удастся. Тут надо 3 дать флоат или абсолют: любым способом выбить из потока, и там зафиксировать.
Ну или на грядах, как в примере выше. Это самый лучший выход.
Только умоляю: не городи дубляжа блоков.

https://www.sarasoueidan.com/blog/ - Разработчик. Спец по доступности, родом из ОАЭ, а значит понимает, о чем говорит. Таки rtl, как ни как.)
https://bitsofco.de/ - пишет не часто. Но весьма меткие и актуальные вещи. Хайпа у нее нет, но очень грамотно.
https://rachelandrew.co.uk/ - крестная мать Грид.
https://uptodate.frontendrescue.org/ - клондайк.)
lea.verou.me - в представлении не нуждается. Маст рид.

На пару недель-месяцев вам хватит.))))

Привет.))

По скроллу: скролла не будет, пока ты не дашь части с ограниченной высотой враппер с overflow: hidden;.
Поставь его на боди - и вот твой скролл.

По колонкам.
У тебя нет ограничений по ширине на родителе. Так почему бы флексу с колоночным направлением, при ограниченной высоте, не дать тебе 3-ю, 4-ю да хоть 10-ю колонку?
Дай на родителя max-width равный 2 ширинам твоих колонок по макету, а колонкам - 50% с паддингами и маргинами. Это как вариант.

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

Я здесь растягиваю их по родителю абсолютом с шириной заранее большей, чем родитель.
Тогда вы играете шириной родителя.

.parent {
position: reletive;
width: 50%; /*ваша по макету*/
padding-bottome: 69%; /*ваша пропорция, по макету*/
overflow: hidden; /* по требованию*/
}

.parent img {
position: absolute;
top: 0;
left: 0;
width: 105%; /*по необходимости увеличить/уменьшить*/
}

При чем тут visibility:hidden?
Вы изначально скрываете часть описания путем назначения max-height + box-shadow или градиент на футер карточки.
НА ховер вешаете увеличение высоты и убирание градиента или тени.

Ботон подсвечиваете по каскаду на ховер по селектору ~

.parent:hover ~ .btn 
{ background-color: green;}

PS max-height - отлично анимируется

Дайте родителю отрицательный маргин, равный паддингу между колонками.

.parent {
  margin: 0 -20px;
}

childen {
  padding: 0 20px;
}

вот тут на класс showcase__list так повешено

https://codepen.io/emelyanova/pen/PLjpwz

Ну, например Так - https://codepen.io/emelyanova/pen/ZXzYgr
Или так - https://codepen.io/emelyanova/pen/PJwJOw