/* CAMPAIGNS */
.campaign-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.campaign-grid > .campaign-card,
.campaign-grid > a.campaign-card{
    min-width:0;
    width:100%;
    max-width:100%;
}

.campaign-card{
    position:relative;
    height:300px;
    border:2px solid rgba(255,255,255,.14);
    border-radius:14px;
    overflow:hidden;
    isolation:isolate;
}

.campaign-card::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    z-index:3;
    pointer-events:none;
}

.campaign-card--red{border-color:rgba(227,24,24,.65)}

.campaign-card--red::after{
    box-shadow:
        inset 0 0 22px rgba(227,24,24,.38),
        inset 0 0 44px rgba(227,24,24,.18);
}

.campaign-card--blue{border-color:rgba(26,140,255,.65)}

.campaign-card--blue::after{
    box-shadow:
        inset 0 0 22px rgba(26,140,255,.38),
        inset 0 0 44px rgba(26,140,255,.18);
}

.campaign-card--orange{border-color:rgba(245,158,11,.65)}

.campaign-card--orange::after{
    box-shadow:
        inset 0 0 22px rgba(245,158,11,.36),
        inset 0 0 44px rgba(245,158,11,.17);
}

.campaign-card img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
}

.campaign-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(to top,rgba(5,10,20,.95) 0%,rgba(5,10,20,.25) 55%,transparent 100%);
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.campaign-overlay h3{
    font-family:var(--font-primary);
    font-size:clamp(20px,2.5vw,28px);
    font-weight:800;
    line-height:1.15;
    text-transform:uppercase;
    margin-bottom:14px;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.campaign-overlay .btn{
    width:fit-content;
    height:40px;
    font-size:11px;
}

.campaign-progress{
    margin-top:18px;
}

.campaign-progress-bar{
    height:4px;
    background:rgba(255,255,255,.15);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:8px;
}

.campaign-card--red .campaign-progress-bar{
    background:linear-gradient(90deg,var(--red) 0,var(--red) 52px,rgba(255,255,255,.15) 52px,rgba(255,255,255,.15) 100%);
}

.campaign-card--blue .campaign-progress-bar{
    background:linear-gradient(90deg,var(--blue) 0,var(--blue) 52px,rgba(255,255,255,.15) 52px,rgba(255,255,255,.15) 100%);
}

.campaign-card--orange .campaign-progress-bar{
    background:linear-gradient(90deg,#f59e0b 0,#f59e0b 52px,rgba(255,255,255,.15) 52px,rgba(255,255,255,.15) 100%);
}

.campaign-progress-fill{
    display:block;
    height:100%;
    border-radius:4px;
}

.campaign-card--red .campaign-progress-fill{background:var(--red)}

.campaign-card--blue .campaign-progress-fill{background:var(--blue)}

.campaign-card--orange .campaign-progress-fill{background:#f59e0b}

.campaign-progress span{
    font-size:12px;
    color:rgba(255,255,255,.75);
}