:root {
    --support-white: #D9D9D9;
    --support-primary: #399DF312;
    --support-primary-1: #262C31;
    --support-primary-2: #062D4E;
    --support-blue: #399DF3;
    --support-gray: #88A2B7;
}

#homeSupport {
    display: flex;
    flex-direction: column;
    padding: 0 24px 100px 24px;
    margin-top: 80px;
}

#homeSupport .title {
    font-family: "DB_Adman", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: left;
    padding: 6px 18px;
    background-color: var(--support-primary);
    border-radius: 40px;
    width: fit-content;
    text-transform: uppercase;
    color: var(--support-blue);
    margin: 0 auto;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#homeSupport .subTitle, .supportCardTitle {
    font-family: "DB_Adman", sans-serif;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.005em;
    text-align: center;
    color: var(--black);
    margin-top: 15px;
    line-height: 30px;
    text-transform: capitalize;
}

#homeSupport .subTitle.jp, #homeSupport .subTitle.cn {
    &.cn, &.jp {
        font-size: 26px;
    }
}

.certificates-page .title {
    text-transform: capitalize;
}

.article {
    text-align: left;
}

#homeSupport .supportCard:nth-child(even) {
    grid-auto-flow: dense;
    direction: rtl;
}

#homeSupport .supportCardTextWrapper {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

#homeSupport .supportCard .supportCardImg {
    width: 100%;
    height: auto;
    margin-top: 24px;
}

#homeSupport .supportCard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

#homeSupport .supportCard .supportCardDate {
    font-family: "DB_Adman", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left;
    padding: 4px 8px;
    background-color: var(--support-primary);
    border-radius: 6px;
    width: fit-content;
    color: var(--support-blue);
    margin: 24px auto 12px 0;
    display: block;
}

#homeSupport .supportCard .supportCardArticle, #homeSupport p {
    font-family: "DB_Adman", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: left;
    color: var(--support-primary-1);
    margin-top: 12px;
}

#homeSupport .supportCard .supportCardArticle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
}

#homeSupport .supportCard .supportCardViewLink {
    padding: 0px 16px;
    border-radius: 12px;
    border: 1px solid var(--support-white);
    height: 32px;
    background-color: transparent;
    margin-top: 12px;
    font-family: "DB_Adman", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--support-primary-2);
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
}

.showMoreButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    border-radius: 16px;
    border: 1px solid var(--support-white);
    height: 44px;
    background-color: transparent;
    margin: 56px auto 65px auto;
    font-family: "DB_Adman", sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.03em;
    width: fit-content;
    color: var(--support-primary-2);
    transition: all .3s ease;
}

.showMoreButton:hover, .showMoreButton:active {
    text-decoration: none;
    border: 1px solid #2E86F9;
    color: #2E86F9;
}

.articles {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
}

@media screen and (max-width: 768px) {
    #homeSupport .subTitle, .supportCardTitle {
        font-size: 28px;
    }

    #homeSupport .supportCard {
        display: flex;
        flex-direction: column;
    }

    #homeSupport .supportCard .supportCardDate {
        margin: 0;
    }

    .articles {
        margin-top: 24px;
    }
}

@media screen and (max-width: 430px) {
    #homeSupport .supportCard:nth-child(even) {
        direction: initial;
    }
}