Flexbox - как заризинить флекс во флексе?

Доброе утро коллеги. Подскажите. На рисунке два item'а состоящих из иконки и текста. Как мне сделать так , что бы при уменьшении окна браузера эти элементы уменьшались хотя бы на 40%. Я сделал эти item'ы flex'ами и при разрешении 1024px они просто исполняют wrap ) Я не против такого хода событий, но чесслово , хотелось бы перед wrap прыжком, немного их скукожить) Скорее всего проблема вызвана тем , что размеры той же самой иконки заданы явно, но я не могу обойти это... Возможно стоит зажать оригинальные иконки в padding хмммм ... Подскажите пожалуйста) Спасибо за понимание.

.service__item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 512px;
    height: 125px;
    border: 2px solid #C4C4C4;
    border-radius: 12px;
    margin-bottom: 24px;
}
.item__logo {
    width: 127px;
    height: 102px;
}
.item__text {
    padding: 20px;
    display: flex;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 4.5%;
    text-align: center;
    width: 349px;
    height: 102px;
    border: 2px solid #6CA09F;
    border-radius: 12px;
}