.article-category-container {
    position: fixed;
    /* top: 14%; */
    z-index: 9;
}

.article-category {
    padding: 16px 32px;
    float: left;
}

.article-container {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    float: left;
}

.article-big {
    height: 440px;
    border-radius: 8px;
    overflow: hidden;
}

.article-medium {
    height: 240px;
    border-radius: 8px;
    overflow: hidden;
}

.article-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-big .article-big-content {
    height: 200px;
    padding: 0px 16px 24px 16px;
    margin-top: -200px;
    background-image: linear-gradient(
        to top,
        rgba(26, 28, 35, 1),
        rgba(30, 30, 30, 0)
    ) !important;
}

.article-medium img,
.article-medium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-medium .article-medium-content {
    border-radius: 8px;
    height: 100%;
    padding: 16px;
    margin-top: -100%;
    background-image: linear-gradient(
        to top,
        rgba(26, 28, 35, 1),
        rgba(30, 30, 30, 0)
    ) !important;
}

.article-small {
    height: 95px;
}

.article-small img,
.article-small img {
    width: 95px;
    height: 95px;
    border-radius: 8px;
    object-fit: cover;
}

.article-extra-small {
    height: 80px;
}

.article-extra-small img,
.article-extra-small img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.article-trending-box {
    padding: 24px 0;
    border-radius: 8px;
    border: 1px solid;
}

.article-square {
    width: 250px;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
}

.article-square img,
.article-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-square .article-square-content {
    border-radius: 8px;
    height: 100%;
    padding: 16px;
    margin-top: -100%;
    background-image: linear-gradient(
        to top,
        rgba(26, 28, 35, 1),
        rgba(30, 30, 30, 0.5)
    ) !important;
}

.article-long img,
.article-long img {
    width: 150px;
    height: 95px;
    border-radius: 4px;
    object-fit: cover;
}

/* DETAIL ARTICLE */

.article-img-banner {
    width: 100%;
    border-radius: 8px;
}

.article-yt-banner {
    width: 100%;
    height: 500px;
}

.content-article img {
    width: 100% !important;
    height: auto !important;
}

.content-article iframe {
    width: 100% !important;
    height: 500px !important;
}

.content-article h1 {
    font-size: 20px !important;
    font-family: "Medium" !important;
}

.content-article h2 {
    font-size: 18px !important;
    font-family: "Medium" !important;
}

.content-article h3 {
    font-size: 16px !important;
    font-family: "Medium" !important;
}

.content-article h5,
.content-article h4 {
    font-size: 14px !important;
    font-family: "Medium" !important;
}

.content-article {
    line-height: 150% !important;
}

.tag-article {
    padding: 8px 12px;
    border-radius: 4px;
}

@media (max-width: 576.5px) {
    .article-category-container {
        top: 90px;
    }
    .article-category {
        padding: 12px 24px;
    }

    .article-container {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .article-big {
        height: 200px;
        border-radius: 4px;
    }
    .article-big .article-big-content {
        background-image: linear-gradient(
            to top,
            rgba(26, 28, 35, 1),
            rgba(30, 30, 30, 0.6)
        ) !important;
    }

    .article-small {
        height: 72px;
    }

    .article-small img {
        width: 72px;
        height: 72px;
        border-radius: 2px;
    }

    .article-trending-box {
        border-radius: 0px !important;
    }

    .content-article h1 {
        font-size: 18px !important;
        font-family: "Medium" !important;
    }

    .content-article h2 {
        font-size: 16px !important;
        font-family: "Medium" !important;
    }

    .content-article h3 {
        font-size: 14px !important;
        font-family: "Medium" !important;
    }

    .content-article h5,
    .content-article h4 {
        font-size: 12px !important;
        font-family: "Medium" !important;
    }
}