: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;
    }
}