/* ==================== ГАЛЕРЕЯ ==================== */

.article-gallery{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:16px;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    margin:30px 0;
    padding:4px 0 14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

.article-gallery::-webkit-scrollbar{
    height:8px;
}

.article-gallery::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:10px;
}

/* Карточка */

.article-gallery a{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;

    padding:12px;
    box-sizing:border-box;

    overflow:hidden;
    position:relative;

    flex:0 0 auto !important;
    scroll-snap-align:start;

    transition:all .2s ease;
}

.article-gallery a:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Изображение */

.article-gallery img{
    width:100%;
    height:220px;
    display:block;
    object-fit:contain;
    transition:transform .3s ease;
}

.article-gallery a:hover img{
    transform:scale(1.03);
}

/* Мобильная версия */

@media (max-width:767px){

    .article-gallery a{
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
    }

    .article-gallery img{
        height:160px;
    }
}

/* ПК: 3 фото + кусочек 4-го */

@media (min-width:768px){

    .article-gallery a{
        width:calc((100% - 48px) / 3.2) !important;
        min-width:calc((100% - 48px) / 3.2) !important;
        max-width:calc((100% - 48px) / 3.2) !important;
    }
}

/* Одно фото */

.article-gallery:has(> a:only-child){
    justify-content:center;
    overflow-x:hidden !important;
}

.article-gallery:has(> a:only-child) a{
    width:min(600px, 100%) !important;
    min-width:min(600px, 100%) !important;
    max-width:min(600px, 100%) !important;
}

/* Два фото */

.article-gallery:has(> a:first-child:nth-last-child(2)){
    justify-content:center;
    overflow-x:hidden !important;
}

.article-gallery:has(> a:first-child:nth-last-child(2)) a{
    width:min(450px, calc((100% - 16px) / 2)) !important;
    min-width:min(450px, calc((100% - 16px) / 2)) !important;
    max-width:min(450px, calc((100% - 16px) / 2)) !important;
}