/* media.css */

/* Стили для маленьких экранов (например, мобильные устройства) */
@media screen and (max-width: 600px) {
    /* Общий шрифт поменьше */
    body {
        font-size: 14px;
    }

    /* Высота шапки уменьшена */
    header {
        height: 500px; /* Вы можете изменить значение согласно вашему дизайну */
        padding-top: 0px;
        padding-bottom: 10px;
        line-height: 5px; /* Устанавливает точную высоту строки в пикселях */
    }

    /* Меню разворачивается в одну строку */
    nav ul {
        flex-direction: column;
    }

    .logo {
        display: none; /* Полностью скрываем логотип */
    }

    /* Блоки контента становятся шире на мобильниках */
    .content-section {
        margin-left: 5px;
        margin-right: 5px;
    }

    /* Заголовки уменьшаются */
    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.2em;
    }

    /* Картинки меньше на небольших экранах */
    .figure img {
        max-width: 100%;
        height: auto;
    }
}

/* Стили для планшетов (широкий диапазон средних экранов) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* Здесь помещаете специфичные стили для планшетных устройств */
}

/* Дополнительные медиа-правила по мере необходимости... */