.breadcrumbs {
    margin-top: 32px;

    .breadcrumbs__container {
        padding: 0;

        ul {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;

            li, a {
                font-weight: 400;
                font-size: 14px;
                line-height: 1.54286;
                color: #2d2d2d;
            }

            li {
                &:not(:last-child):after {
                    content: '>';
                    /*padding: 0 6px 0 4px;*/
                    margin-left: 6px;
                }
            }

            a:hover {
                color: #ff7f00;
            }
        }
    }
}

h1.page-title {
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: #2d2d2d;
    margin-top: 64px;
}

.blog-page-card-handlers {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .blog-page-card-category-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .blog-page-card-date {
        font-weight: 400;
        font-size: 14px;
        line-height: 1.3;
        color: #616262;
    }

    .blog-page-card-category {
        font-weight: 400;
        font-size: 14px;
        line-height: 1.3;
        color: #616262;
    }

    .blog-page-card-status {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.3;
        color: #616262;
    }

    .blog-page-card-status:before {
        content: '';
        border-radius: 100px;
        width: 4px;
        height: 4px;
        background: #616262;
        display: flex;
    }
}

.blog-page-card {
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.06);
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;

    .blog-page-card-img {
        height: 272px;
        border-radius: 20px 20px 0 0;
        width: 100%;

        img {
            border-radius: 20px 20px 0 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .blog-page-card-content {
        padding: 24px;
        display: flex;
        flex-direction: column;
    }

    .blog-page-card-title {
        font-weight: 700;
        font-size: 24px;
        line-height: 1.2;
        color: #2d2d2d;
        margin-top: 24px;
        height: 53px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-page-card-text {
        font-weight: 400;
        font-size: 16px;
        line-height: 1.3;
        color: #616262;
        height: 63px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 16px;
    }

    .blog-page-card-btn {
        border: 1px solid #ff7f00;
        border-radius: 8px;
        padding: 4px 32px;
        height: 44px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.35;
        color: #ff7f00;
        transition: 0.35s;
        text-decoration: none;
        margin-top: 24px;
    }

    .blog-page-card-btn:hover {
        background: #ff7f00;
        color: #fff;
    }
}

.blog-page {
    padding-bottom: 80px;
    /*.blog-page__container {*/
    /*    max-width: 1112px;*/
    /*    margin: 0 auto;*/
    /*}*/

    .blog-page-tabs {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 64px;
    }

    .blog-page-tab {
        cursor: pointer;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.35;
        color: #2d2d2d;
        border-radius: 100px;
        padding: 4px 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        background: #f8f9fb;
        transition: 0.35s;
    }

    .blog-page-tab:hover {
        background: #ff7f00;
        color: #fff;
    }

    .blog-page-tab.active {
        background: #ff7f00;
        color: #fff;
    }

    .blog-page-content {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
        margin-top: 32px;
    }

    .blog-page-more {
        border-radius: 8px;
        padding: 4px 32px;
        width: 200px;
        height: 44px;
        background: #ff7f00;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        margin: 80px auto 0;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.35;
        color: #fff;
        transition: 0.35s;
        cursor:  pointer;
    }

    .blog-page-more:hover {
        color: #a45506;
    }
}

.blog-page-detail {
    padding-bottom: 80px;

    p, dl, ol, ul {
        margin: 0;
    }

    /*.blog-page-detail__container {*/
    /*    max-width: 1112px;*/
    /*    margin: 0 auto;*/
    /*}*/

    .blog-page-detail-labels {
        margin-top: 32px;

        .blog-page-detail-label {
            border-radius: 100px;
            padding: 4px 32px;
            background: #f8f9fb;
            height: 40px;
            font-weight: 700;
            font-size: 16px;
            line-height: 1.35;
            color: #2d2d2d;
            display: flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
        }

        .blog-page-card-category-wrapper {
            gap: 12px;
        }

        .blog-page-card-handlers {
            .blog-page-card-status {
                gap: 12px;
            }
        }
    }

    .blog-page-detail-main-img {
        margin-top: 48px;
        height: 520px;
        width: 100%;
        border-radius: 20px;

        img {
            border-radius: 20px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: inherit;
        }
    }

    .blog-page-detail-cards-title {
        font-weight: 700;
        font-size: 24px;
        line-height: 1.2;
        color: #2d2d2d;
    }

    .blog-page-detail-content {
        display: grid;
        grid-template-columns: 1fr 358px;
        gap: 114px;
        align-items: stretch;
        margin-top: 48px;

        .blog-page-detail-info {
            width: 100%;
            min-width: 0;
        }

        .blog-page-detail-nav {
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.06);
            background: #fff;

            .blog-page-detail-nav-title {
                font-weight: 700;
                font-size: 24px;
                line-height: 1.2;
                color: #2d2d2d;
            }

            .blog-page-detail-nav-links {
                display: flex;
                flex-direction: column;
                gap: 16px;
                margin-top: 32px;

                a {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 1.3;
                    color: #ff7f00;
                    transition: 0.35s;
                }

                a:hover {
                    color: #a45506;
                }
            }
        }

        .blog-page-detail-slider {
            margin-top: 48px;

            .swiper-slide {
                height: 380px;
                border-radius: 20px;

                img {
                    height: 100%;
                    width: 100%;
                    border-radius: 20px;
                    object-fit: cover;
                }
            }

            .swiper-pagination {
                /*gap: 8px;*/
                /*display: flex;*/
                /*align-items: center;*/
                margin-bottom: 8px;
                position: static;


                .swiper-pagination-bullet {
                    width: 6px;
                    height: 6px;
                    /*background: #ececec;*/
                }

                .swiper-pagination-bullet-active {
                    background: #ff7f00;
                }
            }

            .blog-page-detail-slider-arrows {
                margin-top: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .prev,
                .next {
                    cursor: pointer;
                    border-radius: 10px;
                    padding: 7px;
                    width: 45px;
                    height: 45px;
                    background: #ff7f00;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    svg {
                        pointer-events: none;
                    }
                }
            }
        }

        .blog-page-detail-text-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .blog-page-detail-text-content div{
            margin-top: 32px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.3;
            color: #2d2d2d;

            p, ul li, span, div {
                color: inherit;
                font-size: inherit;
                font-weight: inherit;
            }

            img {
                height: 380px;
                width: 100%;
                object-fit: cover;
                border-radius: 20px;
            }

            ul {
                list-style: disc;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                gap: 8px;

                li {
                    list-style: disc;

                }

                li::marker {
                    color: #ff7f00;
                }
            }

            ol {
                counter-reset: li;
                margin-left: 5px;
                display: flex;
                flex-direction: column;
                gap: 8px;

                li {
                    counter-increment: li;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }

                li::before {
                    content: counter(li);
                    border-radius: 100px;
                    padding: 3px 8px;
                    width: 24px;
                    height: 24px;
                    background: #ff7f00;
                    font-weight: 700;
                    font-size: 16px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            strong {
                font-weight: 700;
                font-size: 20px;
                line-height: 1.3;
                color: #2d2d2d;
            }
        }

        .blog-page-detail-cards {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
    }
}

@media(max-width: 1250px) {
    .breadcrumbs {
        margin-top: 20px;
    }

    h1.page-title {
        font-size: 36px;
        margin-top: 40px;
    }

    .blog-page-card {
        .blog-page-card-content {
            padding: 20px;
        }

        .blog-page-card-title {
            font-size: 20px;
            margin-top: 16px;
        }

        .blog-page-card-text {
            font-size: 14px;
        }

        .blog-page-card-btn {
            margin-top: 20px;
        }
    }

    .blog-page {
        padding-bottom: 60px;
        /*.blog-page__container {*/
        /*    max-width: 100%;*/
        /*    margin: 0 auto;*/
        /*    padding: 0 20px;*/
        /*}*/

        .blog-page-tabs {
            gap: 16px;
            margin-top: 40px;
        }


        .blog-page-more {
            margin: 60px auto 0;
        }
    }

    .blog-page-detail {
        padding-bottom: 60px;

        /*.blog-page-detail__container {*/
        /*    max-width: 100%;*/
        /*    margin: 0 auto;*/
        /*    padding: 0 20px;*/
        /*}*/

        .blog-page-detail-labels {
            margin-top: 20px;

            .blog-page-detail-label {
                padding: 4px 20px;
                height: 32px;
                font-size: 14px;
            }

            .blog-page-card-category-wrapper {
                gap: 8px;
            }

            .blog-page-card-handlers {
                .blog-page-card-status {
                    gap: 8px;
                }
            }
        }

        .blog-page-detail-main-img {
            margin-top: 32px;
            height: 230px;
        }

        .blog-page-detail-content {
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 32px;

            .blog-page-detail-slider {
                margin-top: 32px;

                .swiper-slide {
                    height: 230px;
                }


                .blog-page-detail-slider-arrows {
                    margin-top: 20px;
                }
            }

            .blog-page-detail-text-content {
                img {
                    height: 230px;
                }
            }
        }
    }
}

@media(max-width: 700px) {
    .blog-page-card {
        .blog-page-card-title {
            height: auto;
            -webkit-line-clamp: 10;
        }

        .blog-page-card-text {
            height: auto;
            -webkit-line-clamp: 10;
        }
    }

    .blog-page {

        .blog-page-content {
            grid-template-columns: 1fr;
        }

        .blog-page-more {
            width: auto;
        }
    }

    .blog-page-detail {

        .blog-page-detail-content {
            grid-template-columns: 1fr ;
        }
    }
}

