.news_container {
    margin-top: 50px;
    background:
        /* Фон (статический) */
        radial-gradient(circle at 50% 50%, rgb(240 247 251), #d6d6d6 100%),
        /* Градиент для бордера (анимируемый) */
        linear-gradient(90deg, #ff6b6b, #b178ab, #6b5b95, #ff6b6b);
    border-radius: 40px;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    border: 10px solid transparent;
    background-size: auto, 300% 100%;
    padding: 20px;
    padding-right: 5px;
    animation: gradientFlow 10s linear infinite;
}

.news_head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 30px;
}

.filtr {
    width: 50%;
    position: absolute;
    top: 120px;
    z-index: -1;
    transition: all .5s;
}

.filtr.active {
    position: absolute;
    top: 250px;
    z-index: 1;
}

.news_title {
    max-width: 70%;
}



.tags-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}




.filtr .tag-item {
    position: absolute;
    right: 43%;
    top: 40px;
    width: 50px;
    height: 50px;
    transition: all .5s ease-in;
}

.filtr .tag-item a {
    opacity: 0;
    visibility: hidden; /* вместо display: none */
    transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
}

.filtr.active .tag-item {
    position: relative;
    top: auto;
    right: auto;
    width: 110px;
    height: 110px;
}

.filtr.active .tag-item:hover{
    width: 130px;
    height: 130px;
} 


.filtr.active .tag-item a {
    opacity: 1;
    visibility: visible; /* появляется */
}







.filtr .tag-item {
    display: none;
}



@media (max-width: 768px) {
    .filtr {
        width: 100%;
        top: 110px;
    }

    .tags-list {
        justify-content: start;

    }

    .filtr .tag-item {
        left: 22%;
        top: 25px;
    }

    .filtr.active .tag-item {
        left: auto;
    }

    .filtr.active .tag-item:hover{
    width: 110px;
    height: 110px;
} 



}

@media (max-width: 600px) {

    .tags-list {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .filtr.filtr.active .tags-list {
        flex-wrap: wrap;
    }

    .filtr .tag-item {
        left: 45%;
    }

    .filtr.active .tag-item {
        left: auto;
    }

}