#search-btn button[type="submit"] {
    color: white;
    background-color: var(--ci-pink);
}

.news-images {
    overflow: hidden;
}

.news-images img {
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: .5s;
    width: 100%;
    background-color: var(--ci-pink);

    /* border-radius: 10px; */
}


#news-list {
    /* justify-content: space-evenly; */
}

.news-detail {
    /* border-width: 0 2px 2px 2px;
    border-style: solid;
    border-color: #b24183; */
    background-color: white;
    /* box-shadow: 4px 4px 0 0 #b24183; */
}

.news-detail .news-param {
    min-height: 3lh;
    position: relative;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;

    line-height: 1.5;
}

.news-detail a:hover {
    color: #b24183;
    text-decoration: underline;
}

.news-item {
    margin-bottom: 2.5rem;

    & .news-param {
        color: var(--gray);
    }

    &:hover img {
        scale: 1.15;
    }

    /* &:hover .news-param{
        color: var(--ci-pink);
    } */
}

.news-head {
    min-height: 2lh;
    position: relative;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
    /* line-height: 1.5; */
    border-left: 3px solid var(--ci-pink);
    padding-left: .5rem;
    align-content: center;
}

#pagination {
    list-style-type: none;

    & .page-item {
        &.active a{
            color: white;
            background-color: var(--ci-primary);
        }
        & a {
            margin: auto 1rem;
            width: 20px;
            height: 20px;
            display: flex;

            align-items: center;

            border-radius: 50%;
            background-color: white;
            justify-content: center;
            padding: 1rem;
            color: var(--ci-primary);
            border: 1px solid var(--ci-primary);

            &:is(:hover, .active) {
                color: white;
                background-color: var(--ci-primary);
            }

            & i {
                display: flex;
            }
        }
    }
}