Верстка: текст налазит друг на друга при масштабировании

Question

Пытаюсь верстать свой первый макет, столкнулся с проблемой, когда при изминении ширины экрана, текст налазит друг на друга, случается это тогда, когда использую line-height. Использовать его мне нужно, ибо в макете расстояние между строками мелкое, а на практике оно получается больше.

HTML:

<body>
<div class="main">
        <div class="header">
            <div class="header-logo">
                <p>ЛОГОТИП</p>
            </div>
            <div class="header-phone">8 800 232 32 12 <br>
                <a href="#">Заказать обратный звонок</a>
            </div>
    </div>
    <div class="main-text">
        <h1>Продажа кузовных запчастей</h1>
        <h2>с заводской покраской без пробега по РФ</h2>
    </div>

CSS:

.main{
    
    .main-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 1rem;
    line-height: 100%;
    h1 {
        .bold();
        font-size: 10.9rem;
    }
    h2 {
        .reg();
        font-size: 5rem;

    }
}

Вот, что получается:

Вот, что надо:

БЛОГ НА HUSL

Верстка: текст налазит друг на друга при масштабировании

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