/* ******************************************** */
/** About MISSION
/* ******************************************** */

.c-mission {
    text-align: center;
}

.c-mission__text {
    margin-top: 4rem;
}

.c-mission__text>*:not(strong) {
    color: rgb(var(--color-darkest-rgb)/.6);
}

.c-mission__text p strong {
    color: var(--color-darkest);
    font-weight: 500;
}

.c-mission__subtitle {
    position: relative;
    display: inline-block;
    font-size: 1.1em;
    line-height: 1.4;
    margin-top: .6em;
    color: #ff7701;
}

.c-mission__icon {
    color: #201f1d;
    font-size: 0.8em;
    position: absolute;
    top: 0;
    right: -1.8rem;
}

.c-mission__carousel {
    margin-left: calc(var(--space-x)*-1);
    margin-right: calc(var(--space-x)*-1);
    margin-top: 30px;
}

.c-commitment {
    text-align: left;
}

.c-commitment__holder {
    position: relative;
}

.c-commitment__img {
    position: relative;
    width: 100%;
    aspect-ratio: 65/40;
}

.c-commitment__info {
    position: relative;
    background-color: #D9D2C1;
    width: 100%;
    padding: 40px var(--space-x);
}

.c-commitment__info .u-text-xs {
    margin-top: 2rem;
}

.c-commitment__title {
    font-size: clamp(2.4rem, 2.57vw, 3.2rem);

    display: inline;
    font-weight: 200;
    border-bottom: 3px solid currentColor;
    font-family: var(--font-secondary);
    line-height: 1.2;
}

.c-commitment__img {
    position: relative;
}

.c-mission__nav.c-carousel__nav {
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    margin-top: 40px;
}

.c-mission__nav .c-carousel__nav-btn--next {
    position: relative;
    margin-left: 20px;
}

.c-mission__nav .c-carousel__nav-btn {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.c-mission__nav .c-carousel__nav-btn {
    color: #ff7200;
}


.c-commitment__count {
    --size: 4.8rem;

    width: var(--size);
    height: var(--size);
    
    position: absolute;
    right: 3rem;
    bottom: 3rem;
    
    display: flex;
    gap: 0.1rem;
    align-items: center;
    justify-content: center;
    
    background-color: #ff6c00;
    color: #FFFFFF;
    font-size: 2.4rem;
    border-radius: 50%;
}

.c-commitment__count-num-bar {
    content: "/";
    display: block;
    background-color: currentColor;
    transform: translate(-0.1rem, 0.1rem) rotate(10deg);
    height: calc(100% - 2.3rem);
    width: 0.2rem;
    border-radius: 40rem;
}



/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-commitment__holder {
        --info: 55%;
        display: flex;
    }

    .c-mission__carousel {
        width: 100%;
        max-width: var(--wrapper);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--space-x);
        padding-right: var(--space-x);
    }

    .c-commitment__img {
        aspect-ratio: auto;
        width: calc(100% - var(--info));
    }

    .c-commitment__info {
        padding: 55px var(--space-x) 35px;
        width: var(--info)
    }

}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-mission__text {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    /* .c-mission__nav .c-carousel__nav-btn {
        color: var(--color-lightest);
    } */

    .c-commitment__info {
        padding: 65px var(--space-x) 50px;
    }

}

/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    .c-mission__carousel {
        margin-top: 35px;
    }

    .c-commitment__info {
        padding: 80px calc(var(--space-x)*1.8) 65px var(--space-x);
    }

    .c-mission__nav.c-carousel__nav {
        margin-top: 60px;
    }

    .c-commitment__count {
        right: 35px;
        bottom: 35px;
    }

}

/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-mission__carousel {
        margin-top: 40px;
    }

    .c-commitment__holder {
        --info: 50%;
    }

    .c-commitment__info {
        padding: 100px calc(var(--space-x)*1.8) 80px var(--space-x);
    }

}