/* X-Small devices (portrait phones, less than 576px) 
No media query for `xs` since this is the default in Bootstrap


Small devices (landscape phones, 576px and up) */
@media (min-width: 375px) {
    .pagecase-bonne__result {
        margin-bottom: 15px;
    }
}
@media (min-width: 576px) {
    .pagecase-bonne__hero {
        background-size: 100%;
    }

    .pagecase-bonne-intro__subtit {
        background: linear-gradient(170deg, #C472FF 14.56%, rgba(191, 107, 147, 0.83) 86.63%);
    }

    .pagecase-bonne-task__tech-list {
        justify-content: center;
    }

    .pagecase-bonne-des__img {
        width: min(80%, 630px);
    }

    .pagecase-bonne-task__tech-item {
        padding: 10px 20px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .pagecase-bonne-hero__img-main {
        width: 500px;
        height: 350px;
    }

    .pagecase-bonne-hero__list {
        --spacer: 20px;
        row-gap: 20px;
    }

    .pagecase-bonne-hero__item {
        padding: 32px 20px;
    }

    .pagecase-bonne-intro__text-title {
        font-size: 2.4rem;

    }



    .pagecase-bonne-des__color-list {
        justify-content: center;
    }

    .pagecase-bonne-adapt__detail-title {
        max-width: none;
        background: linear-gradient(266.75deg,
                #fff384 10.42%,
                #bc4fff 66.52%,
                #a378ff 98.47%);
    }

    .bonne-set__item-marker {
        margin-top: 5px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .pagecase-bonne-hero__item {
        gap: 20px;
    }



    .pagecase-bonne-intro__subtit {
        background: linear-gradient(170deg, #A931FF 14.56%, rgba(255, 117, 182, 0.83) 86.63%);
    }

    .pagecase-bonne-intro__wrap {
        gap: 38px;
        flex-direction: row;
        align-items: center;
    }

    .pagecase-bonne-intro__desc--mobile {
        display: none;
    }

    .pagecase-bonne-intro__img {
        width: 150%;
        max-width: 520px;
    }

    .pagecase-bonne-intro__desc--desk {
        display: block;
    }

    .pagecase-bonne-intro__text-title {
        background: linear-gradient(to left, #fff384 30%, #b368ff 70%, #a87eff 100%);
    }

    .pagecase-bonne-task__wrap {
        padding: 63px 73px;
        background: radial-gradient(#edd1ff81 -60%, #9198e500 90%);
    }

    .pagecase-bonne-task__tech-title {
        margin-top: 47px;
        margin-bottom: 37px;
    }

    .pagecase-bonne-solve__item {
        flex-direction: row;
    }

    .pagecase-bonne-solve__node {
        width: 357px;
        height: 99px;
        flex-shrink: 0;
    }

    .pagecase-bonne-solve__connect {
        width: 103px;
        height: 2px;
    }

    .pagecase-bonne-solve__text {
        max-width: none;
    }

    .pagecase-bonne-des__wrap {
        padding: 60px 72px;
    }

    .pagecase-bonne__des {
        background: url(../images/des__decor.svg) no-repeat left 180px / 100%;
    }

    .pagecase-bonne-des__color-list {
        --spacer: 20px;
    }

    .pagecase-bonne-des__set {
        padding: 37px 47px;
        border-radius: 0;
        background: radial-gradient(#edd1ff81 -60%, #9198e500 90%);
    }

    .pagecase-bonne-set__icon,
    .pagecase-bonne-set__illus {
        flex-direction: row;
        gap: 40px;
        align-items: start;
    }

    .pagecase-bonne-set__illus-text,
    .pagecase-bonne-set__icon-text {
        max-width: 56.14%;
    }

    .pagecase-bonne-set__img {
        width: min(100%, 1000px);
        display: block;
        margin: 70px auto;
    }

    .pagecase-bonne-process__text-n-img {
        flex-direction: row;
        align-items: center;
        margin-top: 35px;
    }

    .pagecase-bonne-process__img-2 {
        width: min(45%, 626px);
        left: -5%;
        top: 0;
        translate: 0;
    }

    .pagecase-bonne-process__intro {
        padding: 50px;
    }

    .pagecase-bonne-adapt__detail-wrap {
        width: min(77.5%, 1085px);
        padding: 50px 194px 50px 50px;
    }

    .pagecase-bonne-adapt__img-wrap {
        position: absolute;
        width: min(50%, 747px);
        top: 50%;
        translate: 0 -50%;
        right: -190px;
    }

    .pagecase-bonne-result__check-list {
        gap: 21px;
        padding-left: 105px;
        padding-right: 105px;
    }

    .pagecase-bonne-result__check-icon {
        min-width: 130px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .pagecase-bonne__hero {
        background-position: left -10px;
    }

    .pagecase-bonne-hero__img-main {
        width: 650px;
        height: 450px;
    }

    .pagecase-bonne-intro__img {
        max-width: 685px;
    }

    .pagecase-bonne-hero__subtit {
        margin-bottom: 75px;
        margin-top: 5px;
    }

    .pagecase-bonne-hero__icon {
        width: 40px;
    }

    .pagecase-bonne__intro {
        margin-top: 90px;
    }

    .pagecase-bonne-intro__subtit {
        margin-top: 5px;
        margin-bottom: 70px;
    }



    .pagecase-bonne-intro__text-list {
        margin-top: 38px;
        gap: 50px;
    }

    .pagecase-bonne__task,
    .pagecase-bonne__solve,
    .pagecase-bonne__des,
    .pagecase-bonne__process,
    .pagecase-bonne__adapt,
    .pagecase-bonne__result {
        margin-top: 120px;
    }

    .pagecase-bonne-task__wrap,
    .pagecase-bonne-solve__desc,
    .pagecase-bonne-des__img-main,
    .pagecase-bonne-process__wrap-img,
    .pagecase-bonne-adapt__desc,
    .pagecase-bonne-result__check-list {
        margin-top: 70px;
    }

    .pagecase-bonne-task__wrap {
        background: radial-gradient(#d99dff81 -60%, #9198e500 81%);
    }

    .pagecase-bonne-task__tech-item-icon {
        width: 26px;
    }

    .pagecase-bonne-solve__desc {
        padding: 33px 46px;
    }

    .pagecase-bonne-des__desc {
        padding: 0;
    }

    .pagecase-bonne-des__color-list {
        max-width: 1120px;
        margin-right: auto;
        margin-left: auto;
    }

    .pagecase-bonne-des__set {
        margin-top: 97px;
        background: radial-gradient(#d99dff81 -60%, #9198e500 81%);
    }

    .pagecase-bonne-des__color-code {
        font-size: 1.6rem;
    }

    .set-icon-img__block-item {
        width: 52px;
    }

    .pagecase-bonne-set__icon-img {
        gap: 30px;
    }

    .set-illus__img {
        width: 120px;
    }

    .pagecase-bonne-process__wrap-img {
        margin-bottom: 97px;
    }

    .pagecase-bonne-process__text-n-img {
        margin-top: 97px;
    }

    .pagecase-bonne-adapt__img-wrap {
        right: -240px;
    }

    .pagecase-bonne-adapt__desc {
        padding: 33px;
    }

    .pagecase-bonne-adapt__detail {
        margin-top: 97px;
    }

    .pagecase-bonne-adapt__detail-title {
        margin-bottom: 68px;
    }

    .pagecase-bonne-adapt__detail-wrap {
        gap: 15px;
    }

    .bonne-set__item-marker,
    .pagecase-bonne-adapt__detail-marker {
        margin-top: 10px;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    body.page {
        background-image: url(../images/Фон_деск_BC_Мног_сайт.webp);
    }

    .pagecase-bonne-hero__item {
        padding: 32px 30px 32px 20px;
    }

    .pagecase-bonne-intro__subtit {
        background: linear-gradient(170deg, #CA83FD 14.56%, rgba(168, 29, 95, 0.83) 86.63%);
    }

    .pagecase-bonne-intro__text-title {
        background: linear-gradient(to left, #fff384 45%, #bd35fb 70%, #821aff 100%);
    }

    .pagecase-bonne-solve__desc {
        margin-bottom: 97px;
    }

    .pagecase-bonne-solve__item {
        margin-top: 65px;
    }

    .bonne-set__title {
        margin-bottom: 34px;
    }

    .set-icon-img__block-item {
        width: 68px;
    }

    .pagecase-bonne-adapt__detail-wrap {
        padding-right: 390px;
    }

    .pagecase-bonne-adapt__img-wrap {
        width: min(70%, 747px);
        right: -315px;
    }

    .pagecase-bonne-result__btn {
        margin-top: 75px;
        padding: 34px 60px;
        border-radius: 20px;
    }
}