.who-joining {
    padding:var(--section-feature-padding);
    text-align: center;
    border-radius:var(--radius-section-top);
    background: var(--section-feature-bg);
    color:var(--on-section-feature);
    margin-top: -21px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
    z-index: 3;
    margin-top:var(--section-overlap);
}

/* .heading-2 {
  color:var(--text-primary);;
} */
.who-joining h2 {
    font-size: 34px;
    margin-bottom: 8px;
}

.subtitle {
    /* color: var(--text-light); */
    /* margin-top: 45px; */
    margin-bottom: 20px;
    font-size: 33px;
    font-style: oblique;
}

.who-joining h2,
.who-joining p,
.subtitle
.who-joining span,
.who-joining a{
    color:inherit;
}
.join-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.join-card{
    width:100%;
    min-width:0;
    height:280px;
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    cursor:pointer;
    transition:transform .3s ease;
}

@media (max-width:768px){

    .who-joining{
        padding:30px 12px;
    }

    .join-grid{
        grid-template-columns:repeat(4,1fr);
        gap:8px;
    }

    .join-card{
        height:120px;
        border-radius:12px;
    }

    .join-card span{
        left:8px;
        bottom:8px;
        font-size:13px;
        max-width:90%;
    }

    .subtitle{
        font-size:24px;
        margin-bottom:16px;
    }

}

@media (max-width:480px){

    .join-grid{
        gap:6px;
    }

    .join-card{
        height:95px;
    }

    .join-card span{
        left:6px;
        bottom:6px;
        font-size:11px;
        line-height:1.2;
    }

    .subtitle{
        font-size:20px;
    }

}