.category-area {
    display:flex;
    background: none;
    border-radius: 0;
    flex-direction: column;
}
.category-area .article-section {
    width:100%;
}
.category-main {
    width:100%;
}
.category-heading {
    margin-top:25px;
    display:flex;
    flex-direction: column;
    gap:14px;
}
.category-heading h1 {
    color:var(--secondary-main-blue);
    text-transform: uppercase;
    font-size:24px;
    line-height:42px;
}
.category-heading .article-category {
    margin-bottom: 20px;
   
    background: #DEE8FF;
    font-size:18px;
    line-height:32px;
    padding-top:5px;
    padding-left:10px;
    padding-right:10px;
    width:fit-content;
    font-family: var(--font-fjalla-one);
    letter-spacing: 0.6px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
}
.category-heading .article-category a{
    text-decoration: none;
    color:var(--secondary-main-blue);
}
.category-breadcrumb, .category-breadcrumb a{
    font-family:var(--font-fjalla-one);
    color:var(--text-foreground-secondary);
    font-size:14px;
}
.category-sidebar {
    width:100%;
}
.category-area .article-section {
    margin:0;
}
.category-area .views img {
    aspect-ratio: 24/24;
    width:24px;
    height:auto;
    margin:0;
    margin-right:7px;
}
.category-heading .meta {
    list-style: none;
    padding:0;
    display:flex;
    justify-content: space-between;
    font-size:14px;    
    font-family: var(--font-fjalla-one);    
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom:16px;
    align-items: center;
}
.category-heading .meta li {
    margin:0;
}
.category-heading .date-author {
    margin-bottom:5px;
    width:100%;
}
.category-heading .num-views {
    white-space: nowrap;
    font-size:14px;
}
.category-heading .avatar {
    margin-right:5px;
}
.category-heading .social-share {
    --social-share-gap:15px;
    justify-content:left;
    font-size: inherit;
    /* padding-left:35px; */
}
.category-heading .social-share > * {
    background-color:var(--neutral-subtext-on-white);
    width:15px;
    height:15px;
}
.category-area .article-footer {
    flex-wrap: wrap;
    align-items:center;
    font-size:20px;
    font-family:var(--font-bluescreen-bold);
}
.category-area .article-footer .views {
    display:flex;
}
.category-area.detail .article-section h2 {
    font-size:32px;
    text-align: left;;
}

@media (min-width:1024px) {
    .category-area.detail .articles-grid {
        justify-content: space-between;
        --gap: 24px;
        --columns: 3;
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);    
    }
}

.category-area.detail .articles-grid div {
    width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
}
.category-area.detail .article-card {
    width:285px;
    height:343px;
    padding:35px 50px;
}
.category-area.detail .article-title {
    font-size:18px;
    line-height:27px;
    text-transform: uppercase;
}
.category-area.detail .article-meta {
    font-size:11px;
}

@media (min-width:768px) {
    .category-heading h1 {
        font-size:40px;
        line-height:60px;
    }
    .category-heading .meta {
        font-size:16px;
        flex-direction: row;
    }    
}

@media (min-width:1024px) {
    .category-area {
        flex-direction: row;
        gap:20px;
    }
    .category-main {
        width:55%;
    }
    .category-heading .meta {
        flex-wrap:nowrap;
        gap: 15px;
        margin-bottom:40px;
    }
    .category-heading .social-share {
        padding-left:0;
    }
    .category-heading .social-share {
        font-size:16px;
    }
    .category-sidebar {
        width:45%;
    }    
}

@media (min-width:1200px) {
    .category-area {
        gap:40px;
    }    
    .category-heading .social-share > * {
        width:25px;
        height:25px;
    }
    .category-heading .num-views {
        white-space: nowrap;
        font-size:16px;
    }    
    .category-main {
        width:100%;
    }
}