:root {
    --donation-min-width: min(100%, 1100px);
    --donation-gap: 26px;
}

.donation-section {
    width: var(--donation-min-width);
    margin-left: auto;
    margin-right: auto;

    > div {
        padding: 0;
    }
}

.donation-flexbox {
    gap: var(--donation-gap);
    margin-bottom: var(--donation-gap);

    > div {
        flex-basis: 254px;
    }
}

.donation-surcharge-section {
    margin-top: auto;
    height: 100%;
    align-content: center;
}

@media (min-width: 768px) {
    .donation-flexbox {
        flex-wrap: nowrap;

        &.donation-row-of-4 > div {
            max-width: calc((100% - (var(--donation-gap) * 3)) / 4);
        }
    }
}

@media (max-width: 767px) {
    .donation-section {
        max-width: min(90%, 500px);
        text-align: center;
    }

    .donation-flexbox > div {
        flex-basis: 45%;
    }
}

@media (max-width: 1400px) {
    :root {
        --donation-gap: 20px;
    }
}

/* Card charge after open balance — sits below mgr panel on photo backgrounds */
.open-payment-card-remainder-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    background: var(--field-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.65rem 1rem;
    box-shadow: 0 1px 2px var(--shadow-light);
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-color);
    max-width: 100%;
}
.open-payment-card-remainder-banner__label {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex: 1 1 12rem;
    min-width: 0;
}
.open-payment-card-remainder-banner__amount {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
}