.page-header{
    background: url("../images/news-header.jpg") center/cover no-repeat;
}

.page-content{
}

.page-content .wrapper{
    /*
    *1400px at 1920
    *900px at 960
    */
    width: calc(52.083vw + 400px);
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 72px;
}

.news-list{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    --gap: 25px;
    --column: 4;

    margin-right: calc(-1 * var(--gap));
}

.news-list .news{
    width: calc(100% / var(--column) - var(--gap));
    margin-right: var(--gap);
    margin-bottom: var(--gap);
    background-color: #f4f4f4;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: #333333;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.news-list .news:hover{
    color: #8e24aa;
}

.news .cover{
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

.news .cover img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.news .title{
    font-size: 18px;
    line-height: 1.333em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 2.667em;

    margin-bottom: calc(4em / 14);

    /*white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;*/
}

.news .date{
    font-size: 14px;
    opacity: .8;
    margin-bottom: calc(6em / 14);
}

.news .desc{
    font-size: 14px;
    line-height: calc(24em / 14);
    height: calc(48em / 14);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 36px;
}

.news .tag-list{
    font-size: 12px;
    display: flex;
    overflow: hidden;
    /*margin-top: 24px;*/
    justify-self: flex-end;
    margin-top: auto;
    margin-bottom: 0;
}

.news .tag{
    line-height: 1.7em;
    padding: .15em .75em;
    border: 1px solid #cccccc;
    border-radius: .67em;
    margin-right: .75em;
    color: #666666;
}

.news:not(.top):hover .tag{
    color: inherit;
    border-color: #be73d2;
}

.news .info{
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    flex: 1 0 auto;
}

.news.top{
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-direction: row;
}

.news.top .cover{
    width: 50%;
    padding-bottom: calc(12.500vw + 120px);
    flex: 0 0 auto;
}

.news.top .info{
    flex: 0 0 auto;
    width: 50%;
    padding: 36px 48px;
}

.news.top .title{
    color: #8e24aa;
    font-size: 22px;
}

.news.top:hover{
    color: #333;
}

.news.top .tag-list{
    margin-top: 0;
    margin-bottom: 20px;
}

.btn-view{
    text-decoration: none;
    background-color: #8e24aa;
    color: #fff;
    width: 120px;
    line-height: calc(24em / 14);
    font-size: 14px;
    padding: calc(8em / 14) 1.1em;
    align-items: flex-start;
    justify-content: flex-end;
    margin-top: auto;
    margin-bottom: 0;
    text-align: center;
    border-radius: 4px;
}

.btn-view:hover{
    filter: brightness(1.1);
}

.pager-ctn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-top: 15px;
}

.page{
    border-radius: 50%;
    border: 1px solid #cccccc;
    color: #333333;
    text-align: center;
    width: calc(42em / 14);
    height: calc(42em / 14);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 auto;
    margin-left: calc(5em / 14);
    margin-right: calc(5em / 14);
}
.page.active{
    color: #fff;
    background-color: #8e24aa;
    border-color: #8e24aa;
}

.page.active:hover{
    color: #fff;
}

.page.disabled{
    opacity: .8;
    pointer-events: none;
}

.btn-prev{
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nN3B4JyBoZWlnaHQ9JzExcHgnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgb3BhY2l0eT0nMC44JyBmaWxsPSdyZ2IoMTUzLCAxNTMsIDE1MyknIGQ9J003LjcsOS42MjUgTDUuNjA2LDExLjAgTDEuNDAxLDYuODc1IEwxLjQwMSw2Ljg3NSBMMC4wLDUuNDk5IEwxLjQwMSw0LjEyNCBMMS40MDEsNC4xMjQgTDUuNjA2LDAuMCBMNy43LDEuMzc0IEwyLjgwMiw1LjQ5OSBMNy43LDkuNjI1IFonLz48L3N2Zz4=") center/.5em auto no-repeat;
}
.btn-next{
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nN3B4JyBoZWlnaHQ9JzExcHgnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgb3BhY2l0eT0nMC44JyBmaWxsPSdyZ2IoMTUzLCAxNTMsIDE1MyknIGQ9J003LjAsNS40OTkgTDUuNTk4LDYuODc1IEw1LjU5OCw2Ljg3NSBMMS4zOTMsMTEuMCBMMC43LDkuNjI1IEw0LjE5Nyw1LjQ5OSBMMC43LDEuMzc0IEwxLjM5MywwLjAgTDUuNTk4LDQuMTI0IEw1LjU5OCw0LjEyNCBMNy4wLDUuNDk5IFonLz48L3N2Zz4=") center/.5em auto no-repeat;
}

.page:not(.active):hover{
    filter: url(#purple-overlay);
}

@media (max-width: 1440px) {
    .news-list{
        --gap: 15px;
    }
    .news .info{
        padding: 20px 24px;
    }
    .news.top .info{
        padding: 32px 42px;
    }
}

@media (max-width: 1280px) {
    .news-list{
        --column: 3;
    }
    .news .info{
        padding: 18px 20px;
    }

    .news.top .info{
        padding: 28px 32px;
    }

    .news.top .title{
        font-size: 24px;
    }

    .btn-view{
        padding: calc(6em / 14) .8em;
    }
}

@media (max-width: 960px) {
    .news-list{
        --column: 3;
    }
    .news .info{
        padding: 15px;
    }

    .page-content .wrapper{
        width: calc(100% - 60px);
    }

    .news .title{
        font-size: 16px;
    }

    .news.top .info{
        padding: 24px 28px;
    }
}
@media (max-width: 768px) {
    .news-list{
        --column: 2;
    }
    .page-content .wrapper{
        width: calc(100% - 40px);
    }

    .news.top .info{
        padding: 18px;
    }

    .news.top{
        display: flex;
        flex-direction: column;
    }

    .news.top .title{
        font-size: 22px;
    }

    .news.top .cover{
        height: 0;
        padding-bottom: 56.25%;
    }

    .news.top .cover,
    .news.top .info{
        width: 100%;
    }
}

@media (max-width: 540px) {
    .page-content .wrapper{
        padding-top: 40px;
        padding-bottom: 36px;
        width: calc(100% - 30px);
    }

    .news-list{
        --gap: 10px;
        --column: 1;
    }

    .news .tag-list,
    .news.top .tag-list{
        margin-bottom: 0;
        margin-top: 0;
    }

    .top .btn-view{
        display: none;
    }

    .pager-ctn{
        font-size: 12px;
        margin-top: 8px;
    }
}