.mp-mission {
    position: relative;
    padding: 6rem 0;
    background-color: var(--brown);
}

.mp-mission__container {

}

.mp-mission__content {

}

.mp-mission__title._title {
    display: flex;
    gap: var(--gap);
    text-align: left;
}

.mp-mission-title__count {
    font-size: 10rem;
    line-height: 0.8;
    overflow: visible;
}

.mp-mission-title__text {
    display: flex;
    flex-direction: column;
}

.mp-mission__body {
    margin-top: var(--gap);
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, calc(300px + (360 - 300) * ((100vw - 1080px) / (1920 - 1080))));
    grid-template-areas: "item1 item2 item-img-1"
                        "item-img-2 item2 item-img-1"
                        "item-img-2 item3 item4"
                        "item-img-2 item5 item-img-3";
    gap: calc(40px + (80 - 40) * ((100vw - 1080px) / (1920 - 1080)));
    gap: var(--gap);
    justify-content: space-between;
}

@media (min-width: 1921px) {
    .mp-mission__body {
        gap: calc(var(--gap) * 2);
        grid-template-columns: repeat(3, minmax(360px, 1fr));
    }
}

@media (max-width: 1080px) {
    .mp-mission__body {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "item1 item2"
                            "item-img-1 item2"
                             "item-img-1 item3"
                            "item4 item-img-3"
                             "item5 item-img-3";
        gap: 40px;
    }

    .mission-item__image:nth-child(2) {
        display: none;
    }
}

@media (max-width: 767px) {
    .mission-item__image {
        display: none;
    }

    .mp-mission__body {
        grid-template-columns: 1fr;
        grid-template-areas: "item1"
                            "item2"
                            "item3"
                            "item4"
                            "item5";
        gap: calc(40px + (0 - 40) * ((100vw - 320px) / (1920 - 320)));
    }

    .mission-item__text {
        max-width: 90%;
    }

    .mission-item__counter {
        line-height: .7;
    }
}

.mission-item {
    position: relative;
}

.mission-item__image {
    overflow: hidden;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    object-fit: cover;
}

.mission-item__image img {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.mission-item__descr {

}


.mission-item__image:nth-of-type(1) {
    grid-area: item-img-1;
}

.mission-item__image:nth-of-type(2) {
    grid-area: item-img-2;
}

.mission-item__image:nth-of-type(3) {
    grid-area: item-img-3;
}

.mission-item__descr:nth-of-type(4) {
    grid-area: item1;
}

.mission-item__descr:nth-of-type(5) {
    grid-area: item2;
}

.mission-item__descr:nth-of-type(6) {
    grid-area: item3;
}

.mission-item__descr:nth-of-type(7) {
    grid-area: item4;
}

.mission-item__descr:nth-of-type(8) {
    grid-area: item5;
}

.mission-item__counter {
    background-image: linear-gradient(to top, #232020, #d7b789);
    background-clip: text;
    color: transparent;
    font-size: 10rem;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    margin-bottom: var(--gap);
    position: absolute;
    font-weight: 600;
    right: 0;
    top: 0;
    line-height: 1;
    opacity: 0.25;
}

.mission-item__title {

}

.mission-item__text {

}