/* Общий стиль для карточек */
        .card {
            border: none;
            border-radius: 8px;
            padding: 10px;
           /* margin: 10px;*/
            transition: transform 0.2s, box-shadow 0.3s ease;
            width: 100%; /* Размер карточки */
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* Пример стилей для голубого фона */
        .navbar, .search-container {
            background-color: #ADD8E6; /* Голубой цвет */
            padding: 10px 0; /* Добавляем отступы для лучшего отображения */
        }

        .card-title {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-body {
            padding: 10px;
            text-align: center;
        }

        .card-columns {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
        }

        /* Контейнер для изображения или видео с фиксированным соотношением сторон */
        .sticker-cover {
            position: relative;
            width: 100%;
            padding-top: 100%; /* Соотношение сторон 1:1 */
            border-radius: 8px;
            overflow: hidden;
        }

        .sticker-cover img,
        .sticker-cover video,
        .sticker-cover tgs-player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Кнопка */
        .btn-primary {
            background-color: #007bff;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            color: white;
            font-size: 14px;
            display: block;
            margin: 0 auto;
            width: fit-content;
        }

        /* Стили для tgs-player */
        tgs-player {
            display: block;
            width: 100%;
            height: 100%;
        }

        tgs-player:hover {
            opacity: 0.8;
        }

        /* Навигация */
        .navbar {
            margin-bottom: 20px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination li a, .pagination li span {
            transition: background-color 0.3s, box-shadow 0.2s;
        }

        .pagination li a {
            padding: 8px 12px;
            border: 1px solid #ccc;
            color: #444;
            border-radius: 3px;
        }

        .pagination li a:hover {
            background-color: #2196f3;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .pagination li.active span {
            background-color: #2196f3;
            color: white;
            border: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        .pagination .page-item .page-link {
            color: #007bff; /* Цвет текста */
            border: 1px solid #dee2e6; /* Граница */
            padding: 10px 15px; /* Увеличенный отступ */
        }

        .pagination .page-item.active .page-link {
            background-color: #007bff; /* Фон активной страницы */
            color: white;
            border-color: #007bff;
        }

        .pagination .page-item.disabled .page-link {
            color: #6c757d;
        }

        /* Медиа-запросы для мобильных устройств */
        @media (max-width: 767px) {
            .card {
                width: 100%; /* Карточка будет занимать всю доступную ширину */
                max-width: none; /* Убираем максимальное ограничение ширины */
            }
            .sticker-title {
                font-size: 1.5rem; /* Уменьшаем размер шрифта для мобильных устройств */
            }
        }