/*
  Pretendard Font Weight Reference
  Thin: 100, ExtraLight: 200, Light: 300, Regular: 400,
  Medium: 500, SemiBold: 600, Bold: 700, ExtraBold: 800
*/

/* ===============================================
   Give Page
   =============================================== */

.give-section {
    padding: 12.8rem 2.0rem 25.6rem 2.0rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.give-width {
    width: 65ch;
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
}

.give__method {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.give__method-bottom {
    padding-bottom: 6.4rem;
    border-bottom: 0.1rem solid #EEEEEE;
}

.give__title {
    padding: 0;
    margin: 0;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 200%;
    color: var(--color-main);
}

.give__description {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.give__highlight {
    padding: 0;
    margin: 0;
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 200%;
    color: var(--color-text-primary);
    text-decoration: underline;
}

.give__text {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 200%;
}

.give-btn {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 4.8rem;
}

.give__button {
    width: 16.0rem;
    height: 4.0rem;
    padding: 0 1.6rem;
    margin: 0;
    background-color: #FFFFFF;
    color: var(--color-main);
    border: 0.2rem solid var(--color-main);
    border-radius: 20.0rem;
    font-size: 2.0rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.give__button:hover {
    background-color: var(--color-main);
    color: var(--color-text-inverse);
}



/* ===============================================
   모바일 반응형
   1152px == 72em  ( (1152 / 16 = 72) )
   1024px == 64em  ( (1024 / 16 = 64) )
   >>> 768px == 48em  ( (768 / 16 = 48) )
   672px == 42em  ( (672 / 16 = 42) )
   >>> 390px == 25em  ( (390 / 16 = 24.375) )
   320px == 16em  ( (320 / 16 = 16) )
   =============================================== */

@media (max-width: 48em) {
    .give-section {
        padding-top: 6.4rem;
    }

    .give-width {
        width: 100%;
    }
}



@media (max-width: 25em) {
    .give-section {
        padding: 3.2rem 1.6rem 12.8rem 1.6rem;
    }

    .give-width {
        gap: 3.2rem;
    }

    .give__method {
        gap: 1.6rem;
    }

    .give__method-bottom {
        padding-bottom: 3.2rem;
    }

    .give__title {
        font-size: 1.8rem;
        line-height: 160%;
    }

    .give__highlight {
        font-size: 1.6rem;
    }

    .give__text {
        font-size: 1.4rem;
    }

    .give-btn {
        margin-top: 1.6rem;
    }
}