/* ==========================================
   FROM THE COMMUNITY
========================================== */

.wk-community{

    margin:60px 0;

}

.wk-community-header{

    margin-bottom:30px;

}

.wk-community-header h2{

    font-size:36px;
    font-weight:700;
    margin-bottom:8px;

}

.wk-community-header p{

    color:#666;

}

/* ==========================================
   GRID
========================================== */

.wk-community-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;

}

/* ==========================================
   CARD
========================================== */

.wk-community-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:16px;

    text-decoration:none;

    color:#fff;

    transition:.3s;

}

.wk-community-card img{

    width:100%;

    display:block;

    transition:.35s;

}

.wk-community-card:hover img{

    transform:scale(1.05);

}

/* ==========================================
   OVERLAY
========================================== */

.wk-community-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:18px;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.10) 10%,
        rgba(0,0,0,.82) 100%
    );

}

.wk-community-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:7px 12px;

    border-radius:999px;

    background:rgba(0,0,0,.55);

    color:#fff;

    font-size:13px;

    font-weight:600;

    backdrop-filter:blur(6px);

}

.wk-community-info{

    display:flex;

    flex-direction:column;

}

.wk-community-title{

    color:#fff;

    font-size:19px;

    font-weight:700;

    line-height:1.35;

    margin-bottom:6px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.wk-community-channel{

    color:#e6e6e6;

    font-size:14px;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .wk-community-grid{

        grid-template-columns:1fr;

    }

    .wk-community-header h2{

        font-size:30px;

    }

    .wk-community-title{

        font-size:17px;

    }

}