body {
    margin: 0;
    padding: 0;
    background-color: white;
}

/* ЭТОТ БЛОК ЗАМЕНЯЕТ ТАБЛИЦЫ: Идеальное центрирование */
.page-wrapper {
    display: flex;           /* Включаем режим гибких контейнеров */
    justify-content: center; /* Центрируем контент по горизонтали */
    align-items: center; /* Выравнивание по верхнему краю */
    min-height: 100vh;       /* Растягиваем контейнер на 100% высоты экрана */
}

/* Расширяем общую область, давая элементам еще больше свободы */
.content-box {
    width: 100%;
    max-width: 560px; /* Изменено с 500px */
    padding: 20px;
    box-sizing: border-box;
}

/* Блок с иконками */
.site-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* ВАЖНО: 80px — отступ по вертикали (строки), 60px — по горизонтали (колонки) */
    gap: 80px 60px;
    width: 100%;
}

/* Невидимая ячейка вокруг картинки */
.site-section a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    max-width: 130px;
    margin: 0 auto;
}

/* Стили для картинок */
img {
    height: 100px;
    width: auto;
    display: block;
}

/* АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ И СЖАТЫХ ОКОН (до 560px) */
@media (max-width: 560px) {
    .content-box {
        padding: 20px 24px;
    }

    .site-section {
        gap: 60px 24px;
        max-width: 320px;
        margin: 0 auto; /* ВАЖНО: Центрирует всю сетку по центру экрана */
    }
}