.case-banner {
    height: 100%;
    // min-width: 576px
    @include _SLMobile {
    }

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

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

    // min-width: 1024px
    @include _XSDesktop {
        min-height: calc(100vh - 60px);
        // min-height: 100%;
        display: flex;
        flex-direction: column;
    }

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

    // min-width: 1400px
    @include _LDesktop {
        min-height: calc(100vh - 84px);
    }

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

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

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

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

        // min-width: 1024px
        @include _XSDesktop {
            padding-right: 0;
            height: 100%;
        }

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

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

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

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

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

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

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

            height: 100%;

            flex: 1;
        }

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

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

            gap: 102px;
        }

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

    &__left {
        padding-top: 30px;

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

        // min-width: 768px
        @include _Tablet {
            padding-top: 40px;
        }

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

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

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

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

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

    &__left-content {
        // min-width: 1024px
        @include _XSDesktop {
            display: flex;
            flex-direction: column;
            height: 100%;
            align-items: stretch;
        }
    }

    &__breadcrumbs {
        // min-width: 1024px
        @include _XSDesktop {
            flex: 1;
        }
    }

    &__content {
        margin: 60px 0 32px;

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

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

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

        // min-width: 1024px
        @include _XSDesktop {
            margin: 40px 0;
            flex: 0 0 auto;
        }

        // min-width: 1200px
        @include _Desktop {
            // margin: 100px 0 40px;
        }

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

        // min-width: 1600px
        @include _HDesktop {
            // margin: 285px 0 40px;
        }
    }

    &__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    &__tag {
        background-color: #fff;
        color: cl("dark-text");
        padding: 4px;

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

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

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

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

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

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

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

    &__title {
        margin-top: 40px;

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

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

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

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

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

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

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

    &__descr {
        margin-top: 16px;

        font-weight: 400;
        font-size: rem(16);
        line-height: 140%;

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

        // min-width: 768px
        @include _Tablet {
            font-size: rem(20);
        }

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

        // min-width: 1024px
        @include _XSDesktop {
            font-size: rem(12);
            line-height: 1.5;
        }

        // min-width: 1200px
        @include _Desktop {
            font-size: rem(20);
            line-height: 140%;

            margin-top: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 32px;
            font-size: rem(24);
        }

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

    &__advs {
        margin-top: 24px;

        display: grid;
        grid-template-columns: auto 3fr;
        row-gap: 24px;
        column-gap: 32px;
        // justify-content: flex-start;

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

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

            display: flex;
            flex-wrap: wrap;
            gap: 40px;
        }

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

        // min-width: 1024px
        @include _XSDesktop {
            display: grid;
            column-gap: 24px;
            row-gap: 16px;

            margin-top: 24px;
        }

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

            display: flex;
            gap: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 40px;
            gap: 40px;
            row-gap: 24px;
        }

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

    &__adv {
        display: flex;
        flex-direction: column;
        gap: 8px;

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

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

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

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

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

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

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

    &__adv-label {
        color: rgba($color: #fff, $alpha: 0.6);
    }

    &__adv-value {
    }

    &__right {
    }

    &__image {
        display: flex;

        picture {
            display: flex;
            width: 100%;
            height: 100%;

            // min-width: 1024px
            @include _XSDesktop {
                height: calc(100vh - 60px);
            }

            // min-width: 1400px
            @include _LDesktop {
                height: calc(100vh - 84px);
            }
        }

        img {
            aspect-ratio: 360 / 200;
            object-fit: cover;

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

            // min-width: 768px
            @include _Tablet {
                aspect-ratio: 768 / 320;
            }

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

            // min-width: 1024px
            @include _XSDesktop {
                aspect-ratio: unset;
                height: 100%;
            }

            // min-width: 1200px
            @include _Desktop {
                // aspect-ratio: 685 / 616;
            }

            // min-width: 1400px
            @include _LDesktop {
                // aspect-ratio: 1105 / 882;
            }

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

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

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

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

        // min-width: 1024px
        @include _XSDesktop {
            height: 100%;
        }

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

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

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