:root {
    --section-banner-colourTheory: #F0EEE9;
    --section-banner-designTrends: #F5F5F5;
    --section-banner-interactionDesign: #F5F5F5;
    --section-banner-productivity: #FCFDDD;
    --section-banner-technology: #F5F5F5;
    --section-banner-typography: #F5F5F5;
    --section-banner-uxuiDesignCaseStudy: #F5F5F5;
    --section-banner-uxuiDesignPrinciples: #F5F5F5;
    --section-banner-uxuiDesignStrategy: #F5F5F5;
}

.darkmode {
    --section-banner-colourTheory: #242323;
    --section-banner-designTrends: #363636;
    --section-banner-interactionDesign: #363636;
    --section-banner-productivity: #767963;
    --section-banner-technology: #191919;
    --section-banner-typography: #191919;
    --section-banner-uxuiDesignCaseStudy: #191919;
    --section-banner-uxuiDesignPrinciples: #191919;
    --section-banner-uxuiDesignStrategy: #191919;
}

.main-ctnr {
    max-width: var(--systemSpacing-1152);
    margin: var(--systemSpacing-0) auto;
}

.section-tl-area {
    margin: var(--systemSpacing-120) var(--systemSpacing-0) var(--systemSpacing-32) var(--systemSpacing-0);
}

.section-banner-wrp {
    margin: var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-0);
    width: 100%;
}

/* section banner hover */

.section-banner-colourtheory:hover {
    background-color: var(--section-banner-colourTheory);
    border-radius: var(--systemSpacing-20);
}

.section-banner-designtrends:hover {
    background-color: var(--section-banner-designTrends);
    border-radius: var(--systemSpacing-20);
}

.section-banner-interactiondesign:hover {
    background-color: var(--section-banner-interactionDesign);
    border-radius: var(--systemSpacing-20);
}

.section-banner-productivity:hover {
    background-color: var(--section-banner-productivity);
    border-radius: var(--systemSpacing-20);
}

.section-banner-technology:hover {
    background-color: var(--section-banner-technology);
    border-radius: var(--systemSpacing-20);
}

.section-banner-typography:hover {
    background-color: var(--section-banner-typography);
    border-radius: var(--systemSpacing-20);
}

.section-banner-uxuidesigncasestudy:hover {
    background-color: var(--section-banner-uxuiDesignCaseStudy);
    border-radius: var(--systemSpacing-20);
}

.section-banner-uxuidesignprinciples:hover {
    background-color: var(--section-banner-uxuiDesignPrinciples);
    border-radius: var(--systemSpacing-20);
}

.section-banner-uxuidesignstrategy:hover {
    background-color: var(--section-banner-uxuiDesignStrategy);
    border-radius: var(--systemSpacing-20);
}
/* */

.section-banner-wrp img {
    max-width: 100%;
    display: block;
}

.section-banner-portrait {
    display: none;
}

.section-tl {
    font-size: var(--d1-fontSize);
    margin-bottom: var(--systemSpacing-32);
    color: var(--systemPrimary);
    line-height: 90%;
}

.section-dsc {
    font-size: var(--h4-fontSize);
    color: var(--systemSecondary);
}

.img-wrp {
    width: 100%;
}

.img-wrp img {
    max-width: 100%;
    display: block;
    border-radius: var(--systemSpacing-16);

    pointer-events: none;
    user-select: none;
}


/* */
/* article general */

.art__gen-tl-md {
    font-size: var(--h2-fontSize);
    font-weight: 300;
    color: var(--systemPrimary);
    line-height: 1.1;
    margin-bottom: var(--systemSpacing-16);
}

.art__gen-dt {
    font-size: var(--p-fontSize);
    font-weight: 400;
    color: var(--systemTertiary);
    font-family: 'Roboto Mono', monospace;
}

.art__gen-dsc {
    font-size: var(--ph-fontSize);
    font-weight: 300;
    color: var(--systemSecondary);
    line-height: 1.5;
}

/* */
/* article all container */

.art-all-wrp {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rem;
}

.art__gen-ctnr {
    width: 50%;
}

.art__gen-wrp {
    text-decoration: none;
}

.art__gen-wrp:hover {
    opacity: 80%;
}

.art__gen-wrp:hover .art__gen-img-wrp img {
    border-radius: var(--systemSpacing-32);
    transition: all 0.2s ease-in;
}

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


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

    /* */
    /* article container */

    .main-ctnr {
        max-width: 100%;
        margin: var(--systemSpacing-0) var(--systemSpacing-32);
    }

    .section-tl {
        font-size: var(--d2-fontSize);
    }

}


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

    .section-tl-area {
        margin: var(--systemSpacing-80) var(--systemSpacing-0) var(--systemSpacing-20) var(--systemSpacing-0);
    }

    .art-ctnr .art-all-wrp {
        gap: var(--systemSpacing-16);
    }

    .art__gen-ctnr {
        width: 48%;
    }

    .section-tl {
        font-size: var(--d3-fontSize);
    }
}

@media screen and (max-width: 600px) {
    
    .section-tl-area {
        margin: var(--systemSpacing-40) var(--systemSpacing-0) var(--systemSpacing-20) var(--systemSpacing-0);
    }

    .section-banner-landscape {
        display: none;
    }

    .section-banner-portrait {
        display: block;
    }

    /* */
    /* article general */

    .art__gen-tl-md {
        font-size: var(--h3-fontSize);
        font-weight: 300;
        margin-bottom: 1rem;
    }
    
    .art__gen-dt {
        font-size: var(--p-fontSize);
    }
    
    .art__gen-dsc {
        font-size: var(--p-fontSize);
    }

    /* */
    /* article general */

    .art__gen-ctnr {
        width: 100%;
    }

    .art__gen-dt-dsc-wrp {
        margin-bottom: var(--systemSpacing-32);
    }

    .section-tl {
        font-size: var(--h1-fontSize);
    }

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