.vertical-dicider {
    width: 10px;
    height: 100vh;
    top: 0;
    bottom: 0;
    background-color: red;

    z-index: 2222222222222;

    opacity: 0.5;

    position: fixed;

    display: none;

    // min-width: 576px
    @include _SLMobile {
    }

    // min-width: 768px
    @include _Tablet {
    }

    // min-width: 992px
    @include _Laptop {
    }

    // min-width: 1024px
    @include _XSDesktop {
        display: block;
        left: 458px;
    }

    // min-width: 1200px
    @include _Desktop {
        left: 505px;
    }

    // min-width: 1400px
    @include _LDesktop {
        left: 805px;
    }

    // min-width: 1600px
    @include _HDesktop {
    }
}

.case-about {
    &__body {
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            display: grid;
            grid-template-columns: 1fr 2fr;
            column-gap: 20px;
            row-gap: 40px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            display: grid;
            grid-template-columns: 1fr 1.27fr;
            gap: 20px;

            // height: 100%;
            // max-width: 883px;

            // flex: 1;
        }

        // min-width: 1200px
        @include _Desktop {
            grid-template-columns: 1fr 1.42fr;
        }

        // min-width: 1400px
        @include _LDesktop {
            grid-template-columns: 1fr 1.59fr;

            gap: 102px;
        }

        // // min-width: 1024px
        // @include _XSDesktop {
        //     column-gap: 107px;

        //     grid-template-columns: 1fr 1.42fr;

        //     max-width: 883px;
        // }

        // // min-width: 1200px
        // @include _Desktop {
        //     max-width: 930px;
        //     column-gap: 115px;
        //     grid-template-columns: 1fr 1.27fr;
        // }

        // // min-width: 1400px
        // @include _LDesktop {
        //     max-width: 1380px;

        //     grid-template-columns: 1fr 1.01fr;
        //     column-gap: 175px;
        // }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__title {
        color: cl("accent");
    }

    &__content {
        // background-color: green;
        margin-top: 32px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 0;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            grid-row: 1/3;
            grid-column: 2/3;

            max-width: 84.45%;
        }

        // min-width: 1200px
        @include _Desktop {
            max-width: 70.5%;
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__task {
    }

    &__task-title {
    }

    &__task-descr {
        margin-top: 16px;
        color: rgba($color: #fff, $alpha: 0.6);

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 24px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-top: 32px;
        }

        // min-width: 1200px
        @include _Desktop {
            margin-top: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 34px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__result {
        margin-top: 40px;

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 80px;
        }
    }

    &__result-title {
    }

    &__result-list {
        margin-top: 16px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 24px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-top: 32px;
        }

        // min-width: 1200px
        @include _Desktop {
            margin-top: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 32px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__accent {
        margin-top: 40px;

        background-color: cl("accent");

        padding: 32px;

        min-height: 300px;

        position: relative;
        overflow: hidden;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            grid-column: 2/3;
            margin-top: 0;

            min-height: unset;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            grid-column: unset;

            padding: 32px 24px;
            align-self: flex-end;

            max-width: 79%;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            max-width: 89.5%;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__accent-title {
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            max-width: 90%;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            max-width: 75%;

            font-size: rem(14);
            line-height: 1.5;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            max-width: 74%;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__accent-descr {
        margin-top: 24px;
        color: rgba($color: #fff, $alpha: 0.6);

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            max-width: 90%;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            max-width: 66%;

            margin-top: 16px;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            max-width: 74%;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__accent-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;

        position: absolute;
        top: 100%;

        transform: translateY(-53%);

        z-index: 1;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            width: 81px;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            width: 150px;
            right: -24px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }
}

.check-list {
    &__item {
        display: flex;
        align-items: center;
        gap: 16px;

        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    &__icon {
        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 16px;
    }

    &__text {
        color: rgba($color: #fff, $alpha: 0.6);
    }
}
