.donation-band {
    padding-block: var(--space-8);

    background: var(--color-coral);
    color: var(--color-cream);
}

.donation-band__layout {
    display: grid;
    grid-template-columns:
        minmax(18rem, 0.8fr)
        minmax(0, 1.2fr);

    align-items: center;

    gap: var(--space-8);
}

.donation-band__content {
    max-width: 34rem;
}

.donation-band__eyebrow {
    margin:
        0
        0
        var(--space-3);

    color: var(--color-cream);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.donation-band__heading {
    max-width: 14ch;

    margin: 0;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: var(--type-display-split);
    font-weight: var(--font-display-weight);
    line-height: 1.03;

    letter-spacing: var(--font-display-tracking-tight);
}

.donation-band__body {
    max-width: 31rem;

    margin:
        var(--space-4)
        0
        0;

    color: rgba(247, 230, 189, 0.82);

    line-height: 1.6;
}

.donation-band__actions {
    display: grid;

    gap: var(--space-3);

    min-width: 0;
}

.donation-band__amounts {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-2);
}

.donation-band__amount {
    display: grid;
    place-items: center;

    min-height: 3.25rem;

    padding-inline: var(--space-3);

    border: 2px solid var(--color-ink);
    border-radius: var(--radius-sm);

    background: var(--color-ink);
    color: var(--color-cream);

    font-weight: 800;

    text-align: center;
    text-decoration: none;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.donation-band__amount:hover,
.donation-band__amount:focus-visible {
    border-color: var(--color-gold);

    background: var(--color-gold);
    color: var(--color-ink);

    transform: translateY(-0.1rem);
}

.donation-band__primary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    min-height: 3.75rem;

    padding-inline: var(--space-5);

    border: 2px solid var(--color-gold);
    border-radius: var(--radius-sm);

    background: var(--color-gold);
    color: var(--color-ink);

    font-size: 0.8rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.donation-band__primary:hover,
.donation-band__primary:focus-visible {
    border-color: var(--color-ink);

    background: var(--color-ink);
    color: var(--color-cream);

    transform: translateY(-0.1rem);
}


/*
 * Tablet
 */

@media (max-width: 56rem) {
    .donation-band__layout {
        grid-template-columns: 1fr;

        gap: var(--space-7);
    }

    .donation-band__content {
        max-width: 38rem;
    }

    .donation-band__heading {
        max-width: 16ch;
    }
}


/*
 * Mobile
 */

@media (max-width: 40rem) {
    .donation-band {
        padding-block: var(--space-7);
    }

    .donation-band__heading {
        max-width: 14ch;
    }

    .donation-band__amounts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}