Шаблон:Книги

<style> /* Основной контейнер */ .book-covers-row {

 display: flex;
 gap: var(--space-md);
 justify-content: center;
 align-items: flex-start;
 flex-wrap: nowrap;
 overflow-x: auto;
 overflow-y: hidden;
 padding: var(--space-md) 0;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: var(--color-primary) var(--color-surface-2);

}

/* Кастомизация скроллбара для WebKit браузеров */ .book-covers-row::-webkit-scrollbar {

 height: 8px;

}

.book-covers-row::-webkit-scrollbar-track {

 background: var(--color-surface-2);
 border-radius: var(--border-radius--small);

}

.book-covers-row::-webkit-scrollbar-thumb {

 background: var(--color-primary);
 border-radius: var(--border-radius--small);

}

.book-covers-row::-webkit-scrollbar-thumb:hover {

 background: var(--color-primary--hover);

}

/* Элемент обложки */ .book-cover-item {

 flex: 0 0 auto;
 width: 160px;
 max-width: 160px;
 border-radius: var(--border-radius--small);
 overflow: hidden;
 box-shadow: var(--box-shadow-card);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 background: var(--color-surface-1);

}

.book-cover-item:hover {

 transform: translateY(-4px);
 box-shadow: var(--box-shadow-dialog);

}

/* Изображения внутри элементов */ .book-cover-item img {

 display: block;
 width: 100%;
 height: auto;
 object-fit: cover;

}

/* Адаптация для мобильных устройств */ @media (max-width: 768px) {

 .book-covers-row {
   justify-content: flex-start;
   padding: var(--space-sm) var(--space-sm);
   gap: var(--space-sm);
   /* Убираем отступы по краям для лучшей прокрутки */
   margin-left: calc(-1 * var(--space-sm));
   margin-right: calc(-1 * var(--space-sm));
   padding-left: var(--space-sm);
   padding-right: var(--space-sm);
 }
 
 .book-cover-item {
   width: 140px;
   max-width: 140px;
 }

}

/* Для очень маленьких экранов */ @media (max-width: 480px) {

 .book-cover-item {
   width: 120px;
   max-width: 120px;
 }

} </style>