html[data-visual-style="backstage"] .work-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(12px, 1.5vw, 18px);
    align-items: stretch;
}

html[data-visual-style="backstage"] .work-opportunity-card {
    position: relative;
    display: grid;
    min-width: 0;
    height: 100%;
    gap: 11px;
    align-content: start;
    padding: clamp(14px, 1.6vw, 18px);
    overflow: hidden;
    border: 1px solid var(--bh-line);
    border-left: 3px solid var(--bh-signal);
    border-radius: var(--bh-radius-panel);
    background: var(--bh-panel-background);
    box-shadow: var(--bh-panel-shadow);
}

html[data-visual-style="backstage"] .work-opportunity-card::after {
    position: absolute;
    right: -26px;
    bottom: -32px;
    width: 92px;
    height: 92px;
    border: 1px solid color-mix(in srgb, var(--bh-signal) 20%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

html[data-visual-style="backstage"] .work-opportunity-head,
html[data-visual-style="backstage"] .work-opportunity-head h2,
html[data-visual-style="backstage"] .work-opportunity-head h3,
html[data-visual-style="backstage"] .work-opportunity-card p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

html[data-visual-style="backstage"] .work-opportunity-head {
    display: grid;
    gap: 4px;
}

html[data-visual-style="backstage"] .work-opportunity-head h2,
html[data-visual-style="backstage"] .work-opportunity-head h3 {
    font-size: var(--type-card-title);
    line-height: 1.24;
}

html[data-visual-style="backstage"] .work-opportunity-head a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
}

html[data-visual-style="backstage"] .work-opportunity-publisher,
html[data-visual-style="backstage"] .work-opportunity-facts {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

html[data-visual-style="backstage"] .work-opportunity-description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

html[data-visual-style="backstage"] .work-opportunity-card.is-compact {
    grid-template-rows: auto auto auto 1fr;
}

html[data-visual-style="backstage"] .discover-work-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

html[data-visual-style="backstage"] .work-card-save-form {
    align-self: end;
    margin-top: auto;
}

@media (max-width: 719px) {
    html[data-visual-style="backstage"] .work-opportunity-grid,
    html[data-visual-style="backstage"] .discover-work-grid {
        grid-template-columns: 1fr;
    }

    html[data-visual-style="backstage"] .work-opportunity-card {
        width: 100%;
        padding: 14px;
    }
}

@media (forced-colors: active) {
    html[data-visual-style="backstage"] .work-opportunity-card {
        border: 1px solid CanvasText;
    }

    html[data-visual-style="backstage"] .work-opportunity-card::after {
        display: none;
    }
}
