/* ===============================================
   welcome-message
   =============================================== */
.welcome-message {
    padding: 9.6rem 6.4rem;
    display: flex;
    justify-content: center;
}

.welcome-message__container {
    width: 64.0rem;
    display: flex;
    flex-direction: column;
    gap: 9.6rem;
}


/* welcome-message__content */
.welcome-message__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.welcome-message__content p {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--font-weight-regular);
    /* Figma = Medium --> CSS = regular */
    line-height: 200%;
}

.welcome-message__signature-text {
    padding-top: 1.6rem;
}

.welcome-message__signature-text p {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--font-weight-regular);
    /* Figma = Medium --> CSS = Regular */
    line-height: 200%;
}


/* donation-info */
.donation-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    border: 0.2rem solid var(--color-main);
    border-radius: 20.0rem;
    overflow: hidden;
}

.donation-info__instructions {
    flex: 1;
    padding: 2.4rem 2.4rem 2.4rem 6.4rem;
    color: var(--color-main);
    background-color: var(--color-background-surface);
    display: flex;
    flex-direction: column;
}

.donation-info__instructions-label {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 1.8rem;
    font-weight: var(--font-weight-semibold);
    /* Figma = Bold --> CSS = SemiBold */
    line-height: 200%;
}

.donation-info__instructions-text {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
    font-weight: var(--font-weight-medium);
    /* Figma = SemiBold --> CSS = medium */
    line-height: 200%;
}

.donation-info__address {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-text-fixed-white);
    background-color: var(--color-main);
}

.donation-info__address-label {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    /* Figma = Bold --> CSS = SemiBold */
    line-height: 180%;
}

.donation-info__address-text {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    /* Figma = SemiBold --> CSS = Medium */
    line-height: 180%;
}



/* ===============================================
   모바일 반응형
   Desktop : 1728px / (1512px) / 1440px / (1280px)
   Mobile : 1024px / 768px / 390px / 375px

            1512px = 95em(94.5)
            1280px = 80em
            1024px = 64em
   반응형 --> 0768px = 48em
   반응형 --> 0612px = 39em(38.25) - 390px 대신
            0390px = 25em(24.375)
            0375px = 24em(23.43)
            0320px = 16em
   =============================================== */
@media (max-width: 768px) {
    .welcome-message {
        padding: 3.2rem 6.4rem 6.4rem 6.4rem;
    }

    .welcome-message__container {
        width: 100%;
        gap: 6.4rem;
    }
}

@media (max-width: 612px) {
    .welcome-message {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .welcome-message__content {
        gap: 1.0rem;
    }

    .welcome-message__signature-text {
        padding-top: 1.0rem;
    }


    /* donation-info */
    .donation-info {
        flex-direction: column;
        border-radius: 6.0rem;
    }

    .donation-info__instructions {
        padding: 3.2rem 3.2rem 1.6rem 3.2rem;
        align-items: center;
        justify-content: center;
    }

    .donation-info__address {
        padding: 1.6rem 3.2rem 3.2rem 3.2rem;
    }
}