.mission-panel {
    margin-block-end: 30px;
    padding-block-start: 60px;
    position: relative;
    padding-inline: 20px;
}

.mission-panel .bg-img {
    position: absolute;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    width: 100vw;
    height: calc(100% * 375 / 655);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
/* 
.mission-panel .top::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: 76px;
    background-color: #fff;
    z-index: 0;
} */

.mission-panel .top::before {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, white, transparent);
    z-index: 0;
}

.mission-panel .content {
    padding-inline: 20px;
    margin-block-end: 25px;
    position: relative;
    z-index: 1;
}

.mission-panel .content .title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: 0.0938rem;
    position: relative;
    margin-block-end: 7px;
    position: relative;
    z-index: 1;
}

.mission-panel .content .description {
    line-height: calc(22/16);
}

.mission-panel .content .title::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    translate: -50% -50%;
    rotate: -22deg;
    display: block;
    width: 101px;
    height: 150px;
    background-image: url(/includes/public/assets/shared/paint-stroke.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.mission-panel .img-cont {
    position: relative;
    z-index: 1;
    margin-block-end: 20px;
}

.mission-panel .img-cont,
.mission-panel .img-cont img {
    width: 100%;
    height: 100%;
    position: relative;
}

.mission-panel .img-cont::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    display: block;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, transparent 27.6%, rgba(0, 0, 0, 0.46) 100%);
}

.mission-panel .bottom {
    /* padding-inline: 25px; */
    display: grid;
    gap: 20px;
}

.mission-panel .img-cont .credits::before{
    content: "\f3c5";
}
.mission-panel .cta-cont {
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        transform: none;
        gap: 20px;
}

@media screen and (min-width: 48em) {
    .mission-panel {
        display: grid;
        grid-template-columns: 3fr 2fr;
        margin-block-end: 40px;
        padding-block-start: 70px;
    }

    .mission-panel .bg-img {
        height: calc(100% * 425 / 730);
        min-height: 375px;
    }

    .mission-panel .content {
        place-self: center;
        /* max-width: 610px; */
    }

    .mission-panel .cta-cont {
        position: relative;
        transform: translateY(calc(100vw * -65 / 1024));
        padding-inline-end: 15px;
    }
}

@media screen and (min-width: 64em) {
    .mission-panel {
        gap: 135px 0;
        padding: 0 96px 100px;
        grid-template-columns: 6fr 4fr;
        margin-block-end: 48px;
        max-width: 1440px;
        margin: auto;
    }
    .mission-panel .bg-img {
        height: calc(100vw * 730 / 1440);
        max-height: 730px;
    }

    .mission-panel .content {
        /* justify-self: flex-end; */
        align-self: flex-end;
        margin-block-end: 0;
        padding-inline: 65px 15px;
    }

    .mission-panel .content .title {
        font-size: 2.5rem;
        letter-spacing: 0.125rem;
    }

    .mission-panel .content .title::after {
        width: 188px;
        height: 269px;
    }

    .mission-panel .content .description {
        font-size: 1.1875rem;
        line-height: calc(29/19);
    }

    .mission-panel .img-cont {
        translate: 0 250px;
        max-width: 450px;
        justify-self: flex-end;
    }

    .mission-panel .cta-cont {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        flex-direction: column;
        transform: none;
        padding-inline-end: 15px;
    }
}

@media screen and (min-width: 1350px) {
    .mission-panel .cta-cont {
        flex-direction: row;
        gap: 35px;
        padding-inline-end: 15px;
    }

    .mission-panel .cta-cont > div {
        flex: 1 1 50%;
    }
}

/* CTAS */

.mission-cta .inner {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 22px;
    align-items: center;
}

.mission-cta .badge {
    filter: drop-shadow(2.8px 3.8px 4.7px rgba(0, 0, 0, 0.15));
}

.mission-cta .title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.mission-cta .description {
    line-height: calc(18/16);
}

.mission-cta .link-caption {
    font-size: 0.9375rem;
    text-transform: uppercase;
}

.mission-cta .link-caption i {
    font-size: 0.75rem;
    margin-inline-start: 4px;
}

@media screen and (min-width: 48em) {
    .mission-cta {
        margin-bottom: 15px
    }
}

@media screen and (min-width: 64em) {
    .mission-cta {
        /* max-width: 350px; */
    }

    .mission-cta .inner {
        grid-template-columns: 100px 1fr;
    }

    .mission-cta .badge {
        height: 100px;
        width: 100px;
    }

    .mission-cta .title {
        margin-block-end: 3px;
    }

    .mission-cta .description {
        margin-block-end: 5px;
    }
}