.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;
    white-space: nowrap;
}

.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-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;
}


/* */
/* */

.compare-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-20);
    margin-bottom: var(--systemSpacing-20);
}


/* */
/* compare line common */

.compare-line-all-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--systemSpacing-20);
    margin: var(--systemSpacing-0) var(--systemSpacing-20);
}


/**/
/**/

@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-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;
    }


    /* */
    /* */

    .compare-all-wrp {
        max-width: var(--systemSpacing-600);
        margin: var(--systemSpacing-0) auto var(--systemSpacing-20) auto;
    }

    
    /* */
    /* compare line common */

    .compare-line-all-wrp {
        display: flex;
        flex-direction: column;
    }
}


/**/
/**/

@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);
    }

}