section{
    display: flex;
    flex-direction: column;
    align-items: center;
}
section#waysToGive p{
    max-width: var(--content-max-width);
    margin: 2em 0;
}
section#donations{
    background-color: var(--secondary);
}
section#donations #goals{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: var(--content-max-width);
    gap: calc(4 * var(--gap));
    margin: 1em;
}
section#donations #goals > div .icon{
    --width: calc(2 * clamp(15px, 5vw, 30px));
    --height: calc(2 * clamp(15px, 5vw, 30px));
    --padding-y: 0;
    --padding-x: 0;
    margin: 0 auto;
}
section#donations #goals > div .icon svg{
    fill: var(--accent);
}
@media only screen and (max-width: 1024px) {
    section#donations #goals{
        grid-template-columns: repeat(4, 1fr);
    }
    section#donations #goals > div{
        grid-column: span 2 !important;
    }
}

@media only screen and (max-width: 600px) {
    section#donations #goals{
        grid-template-columns: repeat(2, 1fr);
    }
    section#donations #goals > div{
        grid-column: span 2 !important;
    }
}

section#donations #goals > div{
    grid-column: span 2;
    background-color: var(--primary);
    padding: 1.25em;
    gap: calc(2 * var(--gap));
    display: flex;
    flex-direction: column;
}
section#donations #goals > div *{
    padding: 0;
}
section#donations #goals > div ul{
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--gap));
}
section#donations #goals > div ul li{
    list-style: circle;
    margin-left: 1em;
}
section#donations #goals > div :is(h3, h4){
    color: var(--accent);
}
section#donations #goals > :nth-child(1){
    grid-column: 1 / -1;
}
section#donations #goals > :nth-last-child(1){
    grid-column: 4 / span 2;
}
section#donations #goals > :nth-last-child(2){
    grid-column: 2 / span 2;
}
section#donations *:not(h3, h4){
    color: var(--text-dark-background);
}
section#donations h2{
    border-bottom: 1px solid var(--text-dark-background);
}
section#volunteer h2{
    border-bottom: var(--underline-light-background);
    color: var(--text-light-background);
}
section#volunteer{
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--gap));
}
section#volunteer p{
    max-width: var(--content-max-width);
}
section#volunteer a{
    margin-bottom: 1em;
}

