/* */
/* trial as-is / to-be content section */

.as-is-to-be-content-all-wrp {
    margin: var(--systemSpacing-0) var(--systemSpacing-80);
}

.content-ctnr {
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-32);
    margin-bottom: var(--systemSpacing-32);
}

.content-wrp {
    max-width: var(--systemSpacing-1000);
    padding: var(--systemSpacing-80) var(--systemSpacing-0);
    margin: var(--systemSpacing-0) auto;
    width: 100%;
}

.content-overview-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-8);
    margin-bottom: var(--systemSpacing-40);
}

.content-overview-tl {
    font-size: var(--h5-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

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

.content-compare-wrp {
    display: flex;
    flex-direction: row;
    gap: var(--systemSpacing-20);
}

.as-is-content-wrp, .to-be-content-wrp {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.as-is-tl, .to-be-tl {
    font-size: var(--hl-fontSize);
    font-weight: 600;
    margin-bottom: var(--systemSpacing-20);
    
    padding: var(--systemSpacing-8) var(--systemSpacing-12);
    width: fit-content;
    border-radius: var(--systemSpacing-9999);
}

.as-is-tl {
    color: var(--systemWhite);
    background-color: var(--systemBlack);
}

.to-be-tl {
    color: var(--menuCtnr-systemWhite-primary);
    background-color: var(--systemAccent);
}

.content-img-border-wrp {
    width: 100%;
    margin-bottom: var(--systemSpacing-24);
}

.content-img-border-wrp img {
    display: block;
    max-width: 100%;
    border-radius: var(--systemSpacing-24);
    border: var(--systemSpacing-1) solid var(--systemQuinary);
}

.as-is-dsc-wrp, .to-be-dsc-wrp {
    display: flex;
    flex-direction: column;
    padding: var(--systemSpacing-0) var(--systemSpacing-12);
}

.as-is-dsc, .to-be-dsc {
    font-size: var(--hl-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
    line-height: 135%;
    margin-bottom: var(--systemSpacing-8);
}

.as-is-dsc-caption, .to-be-dsc-caption {
    font-size: var(--ch-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
    line-height: 135%;
}

.as-is-dsc-caption:not(:last-child), .to-be-dsc-caption:not(:last-child) {
    margin-bottom: var(--systemSpacing-4);
}


/* */
/* */

@media screen and (max-width: 1294px) {
    
    /* */
    /* as is to be content */

    .content-wrp {
        max-width: 100%;
        padding: var(--systemSpacing-60);
        margin: var(--systemSpacing-0);
    }

    .as-is-tl, .to-be-tl {
        font-size: var(--ph-fontSize);
    }

    .as-is-dsc, .to-be-dsc {
        font-size: var(--ph-fontSize);
    }
}


/* */
/* */

@media screen and (max-width: 960px) {
    
    /* */
    /* trial as-is / to-be content section */

    .as-is-to-be-content-all-wrp {
        margin: var(--systemSpacing-0) var(--systemSpacing-32);
    }

    .content-wrp {
        padding: var(--systemSpacing-40);
    }

    .content-overview-tl {
        font-size: var(--h6-fontSize);
    }
    
    .content-overview-dsc {
        font-size: var(--ph-fontSize);
    }

    .as-is-tl, .to-be-tl {
        font-size: var(--p-fontSize);
    }

    .as-is-dsc, .to-be-dsc {
        font-size: var(--p-fontSize);
    }
}


/* */
/* */

@media screen and (max-width: 600px) {
    
    /* */
    /* trial as-is / to-be content section */

    .content-wrp {
        padding: var(--systemSpacing-32);
    }

    .content-compare-wrp {
        display: flex;
        flex-direction: column;
        gap: var(--systemSpacing-80);
    }

    .content-overview-tl {
        font-size: var(--hl-fontSize);
    }
    
    .content-overview-dsc {
        font-size: var(--p-fontSize);
    }
}