#newshead h1 {
    width: 100%;
    margin-bottom: 2rem;
}
#newshead .brand-grid {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
}
#newshead .brand-btn{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .5rem;
    background-color: transparent;
    border: 2px solid var(--blue1);
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0.6rem 1.4rem;
}
#newshead .brand-btn:hover{
    border: 2px solid var(--blue2);
}
#newshead .brand-btn.active, #newshead .brand-btn.active:hover{
    background-color: var(--gold);
    border: 2px solid var(--gold);
}
#newshead .brand-btn b {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--blue1);
    z-index: 2;
    position: relative;
}
#newshead .brand-btn:hover b{
    color: var(--blue2);
}
#newshead .brand-btn.active b{
    color: var(--white);
}
#newslist {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 2rem;
    width: -webkit-calc(100% + 1.5rem);
    width: -moz-calc(100% + 1.5rem);
    width: calc(100% + 1.5rem);
    -webkit-box-pack: start;
    -webkit-justify-content: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    scroll-margin-top:7rem
}
#newslist .card {
    background: var(--grey2);
    -webkit-border-radius: 1.143rem;
    -moz-border-radius: 1.143rem;
    border-radius: 1.143rem;
    width: -webkit-calc(25% - 1.5rem);
    width: -moz-calc(25% - 1.5rem);
    width: calc(25% - 1.5rem);
    margin-bottom: 1rem;
    margin-right: 1.5rem;
    position: relative;
    cursor: pointer;
    overflow:hidden;
    padding-bottom: 4rem;
    text-decoration: none;
}
#newslist .card:hover {
    text-decoration: none;
    -webkit-box-shadow: var(--shadow);
    -moz-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    -webkit-transform: translateY(-.357rem);
    -moz-transform: translateY(-.357rem);
    -ms-transform: translateY(-.357rem);
    -o-transform: translateY(-.357rem);
    transform: translateY(-.357rem);
    -webkit-transition: -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
    transition: -webkit-transform .3s ease, -webkit-box-shadow .3s ease;
    -o-transition: box-shadow .3s ease, -o-transform .3s ease;
    -moz-transition: transform .3s ease, box-shadow .3s ease, -moz-transform .3s ease, -moz-box-shadow .3s ease;
    transition: transform .3s ease, box-shadow .3s ease;
    transition:transform .3s ease, box-shadow .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease, -webkit-box-shadow .3s ease, -moz-box-shadow .3s ease
}
#newslist .card .text {
    padding:1rem 1rem 0
}
#newslist .card .text b{
    font-size:1rem;
}
#newslist .card:hover .text b{
    color: var(--blue2);
}
#newslist .card .text time{
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
}
#newslist .slider {
    aspect-ratio: 16/9;
}
#newslist .slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#newslist .oneslide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#pagination {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top:2rem
}
#pagination .pagination-controls, #pagination .pagination-controls p {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items:center
}
#pagination .pagination-controls p{
    margin: 0 2rem;
}
#pagination .pagination-controls p input {
    padding: .5rem;
    width: 4rem;
    margin: 0 1rem 0 0;
    text-align: center;
    height:3rem
}
#pagination .pagination-controls button {
    background-color: var(--grey2);
    padding: .5rem;
    width: 3rem;
    height: 3rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius:2rem
}
#pagination .pagination-controls button:hover {
    background-color:var(--blue2)
}
#pagination .pagination-controls button:disabled:hover {
    background-color:var(--grey2)
}
#pagination .pagination-controls button svg {
    fill:var(--blue1)
}
#pagination .pagination-controls button:hover svg {
    fill:var(--gold)
}
#pagination .pagination-controls button:disabled svg {
    fill:var(--grey1)
}
@media only screen and (max-width:1300px){
    #newslist .card{
        width:-webkit-calc(33.33% - 1.5rem);
        width:-moz-calc(33.33% - 1.5rem);
        width:calc(33.33% - 1.5rem)
    }
}
@media only screen and (max-width:900px){
    #newslist .card{
        width:-webkit-calc(50% - 1.5rem);
        width:-moz-calc(50% - 1.5rem);
        width:calc(50% - 1.5rem)
    }

    #newshead .brand-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        /* Убираем лишние margin/padding, которые могут резать контент */
        margin: 0; 
        width: 100%;
    }

    #newshead .brand-btn {
        /* Фиксируем минимальную ширину, чтобы текст не сплющивался */
        min-width: max-content; 
        flex-shrink: 0; /* Запрещаем сжатие кнопки */
        white-space: nowrap; /* Текст точно в одну строку */
        /* Убедимся, что overflow:hidden не режет текст внутри */
        overflow: visible; 
    }
    
    /* Если нужно скрыть скроллбар визуально, но оставить функционал */
    #newshead .brand-grid::-webkit-scrollbar {
        display: none;
    }
    #newshead .brand-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

}
@media only screen and (max-width:600px){
    #newslist .card{width:100%}
}