@font-face {
    font-family: 'Rubik';    
    src: url('../fonts/Rubik-Variable/Rubik-Variable.woff2') format('woff2');
    font-weight: 100 1000;
    font-optical-sizing: auto;
    font-stretch: 0% 200%;
    font-style: normal;
    font-display: swap;
}

/* Стили для контейнера блока с заголовком */
.block-with-header {
    /* Ширина блока */
    --block-with-header__block--width: 100%;
    
    /* Максимальная ширина блока */
    --block-with-header__block--max-width: 394px;

    /* Максимальная высота блока */
    --block-with-header__block--max-height: 46px;

    /* Высота блока */
    --block-with-header__block--height: 100%;

    /* Минимальная высота блока */
    --block-with-header__block--min-height: 46px;

    /* Шрифт заголовка */
    --block-with-header__block-header--font-family: "Rubik";

    /* Шрифт заголовка */
    --block-with-header__block-header--font-weight: 300;

    /* Размер шрифта заголовка */
    --block-with-header__block-header--font-size: 20px;

    /* Межстрочный интервал заголовка */
    --block-with-header__block-header--line-height: normal;

    /* Размер шрифта содержимого */
    --block-with-header__content--font-size: 20px;

    /* Абсолютный отступ слева */
    --block-with-header--absolute-offset-left: 25px;

    /* Абсолютный отступ сверху */
    --block-with-header--absolute-offset-top: -12px;

    /* Внутренний отступ блока */
    --block-with-header--padding-block: 5px;

    /* Горизонтальный внутренний отступ заголовка */
    --block-with-header__block-header--padding: 10px;

    /* Горизонтальный внутренний отступ содержимого */
    --block-with-header__block-content--padding: 0;

    /* Внешний отступ снизу */
    --block-with-header--margin-bottom: 20px;

    /* Радиус скругления границ */
    --block-with-header--border-radius: 20px;

    /* Радиус скругления границ заголовка */
    --block-with-header__block-header--border-radius: 20px;

    /* Цвет фона блока */
    --block-with-header--bg-color: #ffffff;

    /* Цвет границы блока */
    --block-with-header--border-color: #00b0ff;

    /* Цвет текста заголовка */
    --block-with-header__block-header--text-color: #0193C3;

    /* Основной цвет текста */
    --block-with-header--text-color: #000000;

    box-sizing: border-box;

    /* Отступ снизу между блоками */
    margin-bottom: var(--block-with-header--margin-bottom);
}

.block-with-header.auto-height {
    /* Максимальная высота блока */
    --block-with-header__block--max-height: auto;

    /* Высота блока */
    --block-with-header__block--height: 100%;

    /* Минимальная высота блока */
    --block-with-header__block--min-height: auto;
}

.block-with-header.auto-width {
    /* Ширина блока */
    --block-with-header__block--width: 100%;
    
    /* Максимальная ширина блока */
    --block-with-header__block--max-width: auto;
}

/* Стили для самого блока */
.block-with-header__block {

    /* Позиция относительно родительского элемента */
    position: relative;

    /* максимальная ширина блока */
    max-width: var(--block-with-header__block--max-width);

    /* максимальная высота блока */
    max-height: var(--block-with-header__block--max-height);

    /* высота блока */
    height: var(--block-with-header__block--height);

    /* Ширина блока */
    width: var(--block-with-header__block--width);

    /* Минимальная высота блока */
    min-height: var(--block-with-header__block--min-height);

    /* Цвет фона блока */
    background-color: var(--block-with-header--bg-color);

    /* Граница вокруг блока */
    border: 1px solid var(--block-with-header--border-color);

    /* Скругление углов блока */
    border-radius: var(--block-with-header--border-radius);

    /* Позиционирование внутри блока */
    position: relative;

    /* Внутренние отступы */
    padding: var(--block-with-header--padding-block);

    /* Учитывать внутренние отступы при расчете ширины и высоты */
    box-sizing: border-box;
}

/* Стили для заголовка блока */
.block-with-header__block-header {
    box-sizing: border-box;

    /* Цвет текста заголовка */
    color: var(--block-with-header__block-header--text-color);

    /* Вывод заголовка в одну строку */
    display: inline;

    /* Размер шрифта заголовка */
    font-size: var(--block-with-header__block-header--font-size);

    /* Межстрочный интервал заголовка */
    line-height: var(--block-with-header__block-header--line-height);

    /* Положение заголовка слева */
    left: var(--block-with-header--absolute-offset-left);

    /* Положение заголовка сверху */
    top: var(--block-with-header--absolute-offset-top);

    /* Цвет фона заголовка */
    background-color: var(--block-with-header--bg-color);

    /* Внутренний горизонтальный отступ заголовка */
    padding: 0 var(--block-with-header__block-header--padding);

    /* Шрифт заголовка */
    font-family: var(--block-with-header__block-header--font-family);

    /* Цвет шрифта заголовка */
    font-weight: var(--block-with-header__block-header--font-weight);

    border-radius: var(--block-with-header__block-header--border-radius);

    /* Позиционирование заголовка поверх других элементов */
    position: absolute;

    /* Уровень наложения заголовка над другими элементами */
    z-index: 1;
}

/* Стили для содержимого блока */
.block-with-header__block-content {
    box-sizing: border-box;

    /* Цвет основного текста */
    color: var(--block-with-header--text-color);

    /* Размер шрифта основного текста */
    font-size: var(--block-with-header__content--font-size);

    /* Межстрочный интервал основного текста */
    line-height: normal;

    /* Внешние отступы содержимого */
    padding: 0 var(--block-with-header__block-content--padding);
}