/* По умолчанию скрываем кнопки */
.mobile-category-buttons {
    display: none;
}

/* Показываем кнопки только на мобильных */
@media (max-width: 768px) {
    .mobile-category-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Две колонки */
        gap: 8px; /* Уменьшаем расстояние между картинками */
        justify-content: center;
        margin: 20px 10px;
    }

    /* Главная кнопка занимает всю ширину */
    .main-btn {
        grid-column: span 2; /* Растягиваем на всю ширину */
        text-align: center;
    }

    /* Контейнер для изображения */
    .image-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: 12px; /* Закругление */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* Картинка */
    .image-container img {
        width: 100%;
        height: auto; /* Автоматическая высота */
        max-height: 400px; /* Ограничение высоты */
        display: block;
        object-fit: cover; /* Растягивает изображение, чтобы оно заполнило контейнер */
    }

    /* Текст внутри картинки внизу */
    .text-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.7); /* Затемнение снизу */
        color: white;
        font-size: 18px; /* Фиксированный размер */
        font-weight: bold;
        text-align: center;
        padding: 12px 8px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}

/* По умолчанию скрываем кнопки для ПК */
.pc-category-buttons {
    display: none;
}

@media (min-width: 768px) {
    .pc-category-buttons {
        display: grid;
        grid-template-columns: repeat(4, auto); /* 4 кнопки в строке, ширина авто */
        gap: 10px;
        justify-content: center; /* Центрируем кнопки */
        max-width: 900px; /* Ограничиваем ширину */
        margin: 20px auto 60px; /* Центрируем по горизонтали */
        position: relative;
        z-index: 100;
    }

   .btn {
    padding: 5px 24px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: black;
    background: transparent;
    border: 1px solid #0e2658;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    box-sizing: border-box;
    min-width: 300px;
    display: flex; /* Размещаем элементы в одну строку */
    align-items: center; /* Вертикальное выравнивание */
    justify-content: center; /* Горизонтальное выравнивание */
}

.btn-logo {
  margin-right: 8px; /* Отступ между логотипом и текстом */
  vertical-align: middle; /* Вертикальное выравнивание */
}

.btn:hover {
    background: #0e2658;
    color: white;
}