.donation-block {
    padding: var(--space-64) var(--space-36);

    .inner-container {
        max-width: 1296px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        border-radius: var(--border-radius-24);
        background: var(--background-02);
        gap: var(--space-32);
        padding: var(--space-64);

        .title-description {
            max-width: 856px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-24);

            .title {
                color: var(--text-primary);
                text-align: center;
                font-family: BOG, sans-serif;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 48px;
            }

            .description {
                p {
                    color: var(--text-primary);
                    text-align: center;
                    font-family: BOG, sans-serif;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 30px;
                }
            }
        }

        .account-number-container {
            width: fit-content;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: var(--space-24);

            .account-number {
                color: var(--text-accent);
                text-align: center;
                font-family: BOG Headline, sans-serif;
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: 32px;
                text-transform: uppercase;
            }

            a {
                padding: var(--space-8);
                border-radius: var(--border-radius-8);
                background-color: var(--chips-default);
                cursor: pointer;
                transition: background-color 0.3s ease;

                &:hover {
                    background-color: var(--chips-hover);
                }

                &:active {
                    background-color: var(--chips-pressed);
                }
            }
        }

        .account-details {
            display: flex;
            width: fit-content;
            margin: 0 auto;
            gap: var(--space-32);

            .name, .identification-number {
                color: var(--text-secondary);
                text-align: center;
                font-family: BOG, sans-serif;
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: 24px;
            }
        }
    }
}

@media (max-width: 1024px) {
    .donation-block .inner-container .account-details {
        flex-direction: column;
        gap: var(--space-12);
    }
}

@media (max-width: 768px) {
    .donation-block {
        padding: var(--space-64) var(--space-28);
    }
}

@media (max-width: 600px) {
    .donation-block {
        padding: var(--space-48) 0;

        .inner-container {
            padding: var(--space-48) var(--space-24);
            gap: var(--space-24);
            border-radius: 0;

            .title-description {
                .title {
                    font-size: 22px;
                    line-height: 34px;
                }

                .description p {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                }
            }

            .account-number-container {
                .account-number {
                    font-size: 16px;
                    line-height: 32px;
                }
            }
        }
    }
}