:root {
    --background: white;

    --blue: #398CCB;
    --gray: #F0F6FB;
    --darkgray: #96969A;
    --gray-accent: #3B677680;
    --gray-green: #94ABB4;
    --darkblue: #10069F;
    --cyan: #456071;
    --darkcyan: #3B6776;
    --orange: #EB724B;
    --emerald: #00927D;
    --green: #4AA561;

    --item-inactive: #B4B4B4;
    --item-active: var(--darkcyan);
    --highlight-orange: var(--orange);

    --contents-bg: var(--blue);
    --contents-bg-color: var(--blue);
    --text-primary: var(--darkblue);
    --text-paragraph: var(--cyan);

    --header-height: 96px;
    --contents-ml: 75vw;

    --section-bg: white;
    --section-bg-accent: var(--gray);

    --highlight-bg: var(--darkblue);
    --highlight-text: white;

    --quote-bg: var(--darkblue);

    --esg-environment: var(--green);
    --esg-social: var(--blue);
    --esg-governance: var(--orange);

    --divider: var(--gray-accent);
    --box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1);
}

#content .banner {
    background-position: center;
}

#content .inner {
    background-color: #f0f6fb;
}

.banner__backlink, .breadcrumbs {
    display: none !important;
}
/*region Main quote*/

.main section.main-quote {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    padding: 2rem 0 7rem;
}

.main-quote__inner {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
}

.main-quote__background {
    z-index: 0;
    grid-column: 1;
    grid-row: 1;

    width: 90%;
    height: 100%;
    background-color: var(--quote-bg);

    transform: skew(10deg);
}

.main-quote__portrait {
    z-index: 2;

    overflow: hidden;

    width: 300px;
    height: fit-content;

    transform: scale(1.2);
}

.main-quote__text {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 85%;
    height: 100%;
    padding: 10px 10px 10px 35px;
}

.main-quote__text p {
    color: white !important;
    margin-bottom: 15px;
}

.main-quote__text__body {
    font-size: 15px;
}

.main-quote__text__body b {
    padding-left: 40px;
}

@media screen and (max-width: 1280px) {
    .main section.main-quote {
        padding-bottom: 0;
    }

    .main-quote__inner {
        align-items: start;
    }

    .main-quote__text__body {
        font-size: 2rem !important;
    }

    .main-quote__portrait {
        width: 22.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .main-quote__portrait {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .main-quote__text {
        grid-column: 1 / 3;
        grid-row: 1;
        flex-direction: column-reverse;
        gap: 10rem;
        padding: 5rem 0 2.5rem 10rem;
    }

    .main-quote__text__author {
        padding-left: 20rem;
        font-size: 3rem !important;
    }
}

@media screen and (max-width: 768px) {
    .main-quote__text__body {
        font-size: 1rem !important;
    }

    .main-quote__portrait {
        width: 10rem;
    }

    .main-quote__text__author {
        padding-left: 10rem;
        font-size: 1.5rem !important;
    }

    .main-quote__text {
        gap: 4rem;
        padding: 2.5rem 0 1rem 5rem;
    }
}

/*endregion*/