/* Виправлення для карток бібліотеки на мобільних пристроях */

@media (max-width: 480px) {
    /* Фіксуємо ширину контейнера */
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Виправляємо сітку для малих екранів */
    .library-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Виправляємо картки */
    .library-item {
        width: 100%;
        max-width: 100%;
        margin: 0 0 15px 0;
        box-sizing: border-box;
    }

    /* Виправляємо контент карток */
    .library-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Виправляємо зображення */
    .library-image {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Виправляємо теги, щоб вони не виходили за межі */
    .library-tags {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
}

/* Додаткові виправлення для дуже малих екранів */
@media (max-width: 375px) {
    /* Зменшуємо відступи для дуже малих екранів */
    .container {
        padding: 0 5px;
    }

    /* Зменшуємо відступи в картках */
    .library-content {
        padding: 10px;
    }

    /* Зменшуємо розмір шрифту заголовків */
    .library-item-title {
        font-size: 1.1rem !important;
    }

    /* Зменшуємо розмір тегів */
    .library-tag {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }

    /* Зменшуємо кнопку "Read more" */
    .library-btn {
        padding: 5px 10px !important;
        font-size: 0.9rem !important;
    }
}