Перенос текста во 2 колонку с уменьшением размера шрифта

Возникла проблема с реализацией задачи.

Нужно реализовать вывод списка так, чтобы при добавлении 5 блоков с текстом в div текст отображался посередине и со шрифтом большого размера, а при добавлении 6 блока, текст перемещался во 2 колонку и в 2 колонках шло распределение по 3 текста в каждом, при этом размер текста должен уменьшаться.

Как реализовать такую задачу.

Прикрепил фото ниже, чтобы можно было увидеть.

Также вставлю код, который я уже реализовал, но он не имеет уменьшения текста при переносе во 2 блок, и не распределяется равномерно по 3 текста в 2 столбцах, при добавлении 6 текста.

<style>
.prcontainer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100rem;
  width: 24rem;
  padding: 5px;
  position: relative;
  gap: 5px;
  bottom: 0;
  top: 250px;
}
.pcdiv {
    position: relative;
    display: flex;
    height: 190px;
    padding: 0 50px;
    top: 118.06px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.pcstron {
    font-family: 'Muller';
    font-style: normal;
    font-weight: 800;
    font-size: 189.812px;
    line-height: 190px;
    margin-left: 90px;
    color: #FFFFFF;
}
.pcimglogo {
    margin-left: auto;
}
.pritem {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 190px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-template-rows: repeat(2,150px);
    grid-auto-flow: column;
    column-gap: 1rem;
    row-gap: 10px;
}
 
.pptem {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.ptem {
 
}
.pcp {
    font-family: 'Muller';
font-style: normal;
font-weight: 500;
font-size: 50px;
line-height: 61px;
margin-top: 0;
margin-bottom: 0;
}
.pcpp {
    font-family: 'Muller';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 41px;
    width: 778px;
    margin-top: 0;
}
.pcpc {
    font-family: 'Muller';
    font-style: normal;
    font-weight: 700;
    font-size: 90px;
    line-height: 125px;
    color: #E70808;
    width: 525px;
    margin-top: 0;
}
</style>
 
<div >
<div id="html-content-holder" style="  background-color: #F0F0F1; color: #00cc65; display: inline-block; position: relative; width: 2000px; height: 2000px;">
        <div class="pcdiv">
        <strong class="pcstron">Прайс</strong>
        <?
            
            
            if ($logo != '') {
                ?><img class="pcimglogo" src="<?=$logo['val']?>"><?
            }else{
                ?><img class="pcimglogo" src="/admin/dizain-market/generate.php?id_logo=0&title=Нейл Студио&txt=Студия наращивания ногтей"><?
            }
 
            ?>
        </div>
        <div class="prcontainer">
        <div class="pritem">
            <div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div>
        </div>
           <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
           <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
           <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
            <div class="pritem"><div class="ptem">
        <p class="pcp">Гель лак + маникюр</p>
        <p class="pcpp">с укреплением восстановлением
и моделированием архитектуры ногтей</p>
             </div>
            <div class="pptem">
        <p class="pcpc">300p</p>
         </div></div>
             </div>
 
    </div>
  </div> 

Отображение 5 блоков в 1 столбце

Отображение 6 блоков в 2 столбцах по 3 блока в каждом столбце

Отображение 3 блоков посередине


Ответы (0 шт):