Flexbox & Grid Issue: Image Block Shrinks Unexpectedly on Small Screens

I have a layout where .digital__main is a flex container, and inside it, .digital__section is a flex child that contains a .digital__list using display: grid. Each grid item (.digital__item) contains an image block (.digital__img) styled with padding-bottom: 75% to maintain an aspect ratio.

Everything works fine on larger screens, but when I switch flex-direction: column at a certain breakpoint (in my case, @include sm), the image blocks shrink too much, cutting off content instead of maintaining the expected proportions.

html

<div class="digital"><div class="digital__inner"><div class="digital__main"><div class="digital__content"><h2 class="digital__title">Диджитал-реклама</h2></div><div class="digital__section"><ul class="digital__list"><li class="digital__item"><div class="digital__img"><picture class="lazyload is-loaded" data-loaded="true"><source srcset="images/digital/digital-01.webp" data-srcset="images/digital/digital-01.webp"><img src="images/digital/digital-01.jpg" data-src="images/digital/digital-01.jpg" alt="Cайт&nbsp; https://ria-stk.ru/" width="380" height="285"></picture></div><div class="digital__info"><p class="digital__text">Cайт&nbsp; <a href="#">https://ria-stk.ru/</a></p></div></li><li class="digital__item"><div class="digital__img"><picture class="lazyload is-loaded" data-loaded="true"><source srcset="images/digital/digital-02.webp" data-srcset="images/digital/digital-02.webp"><img src="images/digital/digital-02.jpg" data-src="images/digital/digital-02.jpg" alt="Электроннаягазета Quality News" width="380" height="285"></picture></div><div class="digital__info"><p class="digital__text">Электроннаягазета Quality News</p></div></li><li class="digital__item"><div class="digital__img"><picture class="lazyload"><source srcset="images/icons/empty.png" data-srcset="images/digital/digital-03.webp"><img src="images/icons/empty.png" data-src="images/digital/digital-03.jpg" alt="E-mail рассылки" width="380" height="285"></picture></div><div class="digital__info"><p class="digital__text">E-mail рассылки</p></div></li></ul></div></div></div></div>

sass

.digital&__main      display: flex      justify-content: space-between      flex-wrap: wrap      gap: var(--gap)&__content      max-width: 350px&__section      flex-grow: 1&__list      display: grid      grid-template-columns: repeat(3, minmax(200px, 380px))      gap: var(--gap)&__title      @extend .title&__img      @include img-cover(75%, var(--border-radius-15))&__info      padding-top: 15px&__text      @extend .title      @extend .title--second      letter-spacing: var(--letter-spacing)      a         text-decoration: underline   @include xl&__main         flex-direction: column&__content         max-width: 100%   @include sm&__list         grid-template-columns: 1fr&__section         flex-grow: 0

@include sm // problem breakpoint (767px)

I tried setting width: 100% on .digital__section and .digital__img, adding align-items: stretch to .digital__main, removing flex-grow: 1 from .digital__section, changing grid-auto-rows: auto, and setting min-height: 200px on .digital__img, but the issue persists.

IMPORTANT: The issue is resolved when I set .digital__main { display: block; }, but I would prefer to keep it as display: flex.