.brand-info-section {
    display: flex;
    flex-direction: column;
}

.brand-info-all-wrp {
    margin: var(--systemSpacing-100) var(--systemSpacing-80) var(--systemSpacing-80) var(--systemSpacing-80);
}

.brand-logo-name-wrp {
    margin-bottom: var(--systemSpacing-32);
}

.brand-logo-wrp img {
    display: block;
    width: var(--systemSpacing-100);
    height: var(--systemSpacing-100);
    border-radius: var(--systemSpacing-28);
    margin-bottom: var(--systemSpacing-32);
}

.brand-logo-border-wrp img {
    display: block;
    width: var(--systemSpacing-100);
    height: var(--systemSpacing-100);
    border-radius: var(--systemSpacing-28);
    margin-bottom: var(--systemSpacing-32);
    border: var(--systemSpacing-1) solid var(--systemQuinary);
}

.brand-name, .brand-dsc {
    font-size: var(--h1-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    line-height: 100%;
    letter-spacing: var(--negative-systemSpacing-1);
}

.section-banner-ctnr {
    background-color: var(--systemBG-primary);
    padding: var(--systemSpacing-8) var(--systemSpacing-16);
    border-radius: var(--systemSpacing-12);
    margin-bottom: var(--systemSpacing-32);
}

.section-banner-txt-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-12);
}

.section-banner-badge {
    background-color: var(--systemBlack);
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
    border-radius: var(--systemSpacing-9999);
    font-size: var(--c1-fontSize);
    font-weight: 600;
    color: var(--systemWhite);
    text-align: center;
}

.section-banner-dsc {
    font-size: var(--ch-fontSize);
    color: var(--systemPrimary);
    font-weight: 500;
}

.section-banner-dsc a {
    font-size: var(--ch-fontSize);
    color: var(--systemPrimary);
    font-weight: 500;
    text-decoration: underline;
}

.section-banner-dsc a:hover {
    text-decoration: none;
}

.systemGrid-trial-41 {
    display: grid;
    grid-gap: var(--systemSpacing-12);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    max-width: var(--systemSpacing-800);

    grid-auto-flow: row;
    grid-template-columns: auto;
    grid-template-rows: auto;
}

.a-i-w--1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.a-i-w--2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.a-i-w--3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.a-i-w--4 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.article-info-all-wrp {
    margin-bottom: var(--systemSpacing-32);
}

.article-info-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
    padding: var(--systemSpacing-12);
    border-radius: var(--systemSpacing-12);
}

.article-info-subtl {
    font-size: var(--ch-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
}

.article-info-tl {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}


/* share mail section 
.share-mail-btn-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-16);
}

.share-mail-btn-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--systemBG-primary);
    gap: var(--systemSpacing-8);
    padding: var(--systemSpacing-12) var(--systemSpacing-20) var(--systemSpacing-12) var(--systemSpacing-16);
    border-radius: var(--systemSpacing-9999);
}

.share-mail-btn-wrp:hover {
    background-color: var(--systemBG-primary-hover);
}

.share-mail-btn-wrp .icon-wrp svg {
    display: block;
    fill: var(--systemPrimary);
}

.share-mail-txt {
    color: var(--systemPrimary);
    font-size: var(--ph-fontSize);
}
*/


/* */
/* */

/* .proj-dsc-section {
    background-color: var(--systemBG-primary);
} */


.proj-dsc-section-all-wrp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    margin: var(--systemSpacing-20) var(--systemSpacing-80) var(--systemSpacing-160) var(--systemSpacing-80);
}

.proj-overview-ctnr {
    width: 100%;
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-32);
    margin-bottom: var(--systemSpacing-20);
}

.proj-overview-all-wrp {
    max-width: var(--systemSpacing-1000);
    margin: var(--systemSpacing-0) auto;
    padding: var(--systemSpacing-80);
}

.proj-overview-tl {
    font-size: var(--ph-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
    padding-right: var(--systemSpacing-32);
    white-space: nowrap;
    vertical-align: top;
    line-height: 200%;
}

.proj-overview-dsc {
    font-size: var(--h2-fontSize);
    font-weight: 500;
    color: var(--systemPrimary);
    width: 100%;
    line-height: 135%;
    letter-spacing: var(--negative-systemSpacing-1);    
}

.proj-tldr-ctnr {
    width: 100%;
}

.proj-tldr-all-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--systemSpacing-20);
    /* max-width: var(--systemSpacing-1200); */
}

.proj-tldr-txt-wrp {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-32);
    padding: var(--systemSpacing-40) var(--systemSpacing-60);
}

.tldr-tl {
    font-size: var(--h6-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    margin-bottom: var(--systemSpacing-8);
}

.tldr-dsc {
    font-size: var(--hl-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
    line-height: 135%;
}


/* */
/* */

@media screen and (max-width: 1294px) {

    /* */
    /* project overvie section */

    .proj-overview-dsc {
        font-size: var(--h4-fontSize);
    }

    .proj-tldr-txt-wrp {
        padding: var(--systemSpacing-32);
    }

    .tldr-tl {
        font-size: var(--hl-fontSize);
        margin-bottom: var(--systemSpacing-8);
    }
    
    .tldr-dsc {
        font-size: var(--ph-fontSize);
    }
}


/* */
/* */

@media screen and (max-width: 960px) {

    /* */
    /* brand information section */

    .brand-info-all-wrp {
        margin: var(--systemSpacing-80) var(--systemSpacing-32) var(--systemSpacing-40) var(--systemSpacing-32);
    }

    .brand-name, .brand-dsc {
        font-size: var(--h2-fontSize);
    }

    .systemGrid-trial-41 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .a-i-w--1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    
    .a-i-w--2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    
    .a-i-w--3 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    
    .a-i-w--4 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }


    /* */
    /* project overview section */

    .proj-dsc-section-all-wrp {
        margin: var(--systemSpacing-20) var(--systemSpacing-32) var(--systemSpacing-60) var(--systemSpacing-32);
    }

    .proj-overview-all-wrp {
        margin: var(--systemSpacing-0) auto;
        padding: var(--systemSpacing-40);
    }

    .proj-overview-dsc {
        font-size: var(--h5-fontSize);
    }

    .proj-tldr-all-wrp {
        flex-direction: column;
    }

    .proj-tldr-txt-wrp {
        border-radius: var(--systemSpacing-20);
        padding: var(--systemSpacing-40);
    }
}


/* */
/* */

@media screen and (max-width: 600px) {

    /* */
    /* brand information section */

    .brand-logo-wrp img {
        width: var(--systemSpacing-72);
        height: var(--systemSpacing-72);
        border-radius: var(--systemSpacing-24);
    }

    .brand-logo-border-wrp img {
        width: var(--systemSpacing-72);
        height: var(--systemSpacing-72);
        border-radius: var(--systemSpacing-24);
        border: var(--systemSpacing-1) solid var(--systemQuinary);
    }

    .brand-name, .brand-dsc {
        font-size: var(--h4-fontSize);
    }

    .article-info-wrp {
        background-color: var(--systemBG-primary);
    }

    .article-info-subtl {
        font-size: var(--c1-fontSize);
    }
    
    .article-info-tl {
        font-size: var(--ch-fontSize);
    }


    /* */
    /* brand information section */

    .section-banner-txt-wrp {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    /* */
    /* project dsc section */

    .proj-overview-all-wrp {
        display: flex;
        flex-direction: column;
        padding: var(--systemSpacing-32);
    }
    
    .proj-tldr-txt-wrp {
        border-radius: var(--systemSpacing-20);
        padding: var(--systemSpacing-32);
    }

    .proj-overview-tl {
        font-size: var(--p-fontSize);
    }

    .proj-overview-dsc {
        font-size: var(--h6-fontSize);
    }

    .tldr-tl {
        font-size: var(--ph-fontSize);
        margin-bottom: var(--systemSpacing-8);
    }
    
    .tldr-dsc {
        font-size: var(--p-fontSize);
    }
}