section.financial-benefits {
    .content {
        max-width: 816px;
        margin: auto;
    }

    .d-grid {
        gap: 16px;
    }

    .benefits-container {
        background-color: hsl(var(--muted));
        padding: 40px;
        border-radius: 8px;

        .benefits-icon {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .icon {
            background-color: hsl(var(--gold));
            width: 24px;
            height: 24px;
            overflow: hidden;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        svg {
            width: 16px;
            height: 16px;
            color: hsl(var(--primary-foreground));
        }
    }

    @media (min-width: 768px) {
        .d-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 767px) {
        .d-grid {
            grid-template-columns: 1fr;
        }
    }
}

section.popular-projects {
    background-color: hsl(var(--muted));

    .content {
        max-width: 1024px;
        margin: auto;
    }

    a {
        background-color: hsl(var(--background));
        padding: 24px;
        border-radius: 8px;
        transition: .3s;
        text-decoration: none;

        &:hover {
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
            transform: translateY(-.25rem);

            .icon {
                background-color: hsl(var(--cta) / .2);
            }
        }

        .icon {
            height: 64px;
            width: 64px;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: hsl(var(--cta) / .1);
            margin: 0 auto 16px;
            transition: .3s;

            svg {
                width: 32px;
                height: 32px;
                color: hsl(var(--cta));
            }
        }

        p svg {
            height: 12px;
            width: 12px;
        }

    }

    @media (min-width: 768px) {
        .d-grid {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 32px;
        }
    }

    @media (max-width: 767px) {
        .d-grid {
            gap: 30px;
            grid-template-columns: 1fr;
        }
    }
}

section.how-it-works {

    .content {
        max-width: 1024px;
        margin: auto;
    }

    .project-card {
        .icon {
            height: 80px;
            width: 80px;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: hsl(var(--gold));
            margin: 0 auto 24px;
            transition: .3s;

            svg {
                width: 40px;
                height: 40px;
                color: #fff;
            }
        }
    }

    @media (min-width: 768px) {
        .d-grid {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 32px;
        }
    }

    @media (max-width: 767px) {
        .d-grid {
            gap: 30px;
            grid-template-columns: 1fr;
        }
    }
}

section.cta_group {
    background-color: hsl(var(--gold));

    .content {
        max-width: 768px;
        margin: auto;
        text-align: center;
    }

    @media (min-width: 1200px) {
        padding: 80px 0;
    }

    .note p {
        margin: 0;
        font-size: 14px;
    }

    .note p,
    .note a {
        color: hsl(var(--primary-foreground) / .8);
    }

    .note a:hover {
        color: hsl(var(--primary-foreground));
    }

    .bg-blue-line {
        border-color: hsl(var(--primary)) !important;
    }
}