Есть такой блок, как сделать его адаптивным? Чтобы текст и размеры уменьшались при сужении вьюпорта. Я пробовал проценты но в конечном итоге блок становится СЛИШКОМ маленьким. У меня есть мысль на счет медиа-запросов, но не уверен что это правильный выход.
.statistic-card {
width: 175px;
height: 95px;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
border-radius: 16px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50% 30%;
justify-items: center;
align-items: center;
font-family: Nunito;
background-color: white;
}
.statistic-card__title {
font-weight: 700;
font-size: 12px;
opacity: 0.5;
font-family: Quicksand;
}
.statistic-card__projects-counter{
font-weight: 700;
font-size: 24px;
}
<div class="statistic-card">
<p class="statistic-card__title">⭐ GREAT PROJECT</p>
<p class="statistic-card__projects-counter">800+ Done</p>
</div>