.good-deeds-hero {
    background:
        linear-gradient(90deg, rgba(4, 11, 10, .99) 0%, rgba(5, 12, 11, .94) 38%, rgba(5, 10, 9, .54) 66%, rgba(4, 8, 7, .2) 100%),
        url('../images/good-deeds/good-deeds-hero.webp') center right / cover no-repeat;
}

.good-deeds-hero__copy {
    text-shadow: 0 3px 24px rgba(0, 0, 0, .35);
}

.good-deeds-directions article > div {
    width: 64px;
    height: 64px;
    margin-bottom: 52px;
    border: 1px solid rgba(176, 119, 50, .16);
    border-radius: 20px;
    background: linear-gradient(145deg, #f8eddd, #ebd7bb);
    color: #a86f2d;
    box-shadow: 0 10px 24px rgba(117, 78, 34, .09);
}

.good-deeds-directions article > div svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 639px) {
    .good-deeds-hero {
        background:
            linear-gradient(180deg, rgba(4, 11, 10, .88), rgba(4, 10, 9, .96)),
            url('../images/good-deeds/good-deeds-hero.webp') 64% center / cover no-repeat;
    }
}