@import "styles/fonts.css";
@import "styles/vars.css";
@import "styles/reset.css";
@import "styles/promo.css";
@import "styles/header.css";
@import "styles/footer.css";
body {
    font-family: 'Inter-Regular', sans-serif;
    background-color: var(--dark-08);
}


a {
    text-decoration: none;
    color: inherit;
}

.section , .footer {
    background-color: var(--dark-08);
}

.container-section-1 {

    .table-section-1 {
        display: grid;
        width: 100%;
        grid-template-columns: 60% 40%;
        @media (width <= 764px) {
            grid-template-columns: 1fr;
        }

        .table-section-item-2 {
            background-image: url("./images/resources-preview/bg_tablet.png");
            background-size: cover;
            border: 1px solid var(--dark-15);
            border-left: none;
            display: flex;
            align-items: flex-end;

            .table-section-items {
                --padding-top: var(--space-80);
                --padding-left: var(--space-80);
                --padding-bottom: var(--space-80);
                padding-top: var(--padding-top);
                padding-left: var(--padding-left);
                padding-bottom: var(--padding-bottom);
                @media (width <= 1440px) {
                    --padding-left: var(--space-50);
                    --padding-bottom: var(--space-50);
                }

                .table-section-item {
                    padding-top: var(--space-30);
                    padding-bottom: var(--space-30);
                }

                .table-section-item-text {
                    .table-section-item-content-title-2 {
                        font-weight: 500;
                        font-size: var(--space-24);
                        color: var(--absolute-white);
                        @media (width <= 1440px) {
                            font-size: var(--space-20);
                        }
                    }

                    .table-section-item-content-title-3 {
                        font-size: var(--space-18);
                        color: var(--grey-60);
                        padding-bottom: var(--space-30);
                        padding-top: var(--space-15);
                        @media (width <= 1440px) {
                            font-size: var(--space-16);
                        }
                    }

                    a {
                        border: 1px solid var(--dark-15);
                        border-radius: var(--space-12);
                        padding: var(--space-18) var(--space-24);
                        background-color: var(--dark-08);
                        align-items: center;
                        @media (width <= 1440px) {
                            padding: var(--space-14) var(--space-20);
                            font-size: var(--space-14);

                            width: var(--space-20);
                            height: var(--space-20);

                        }
                    }
                }

                .table-section-item-img {
                    --padding-top: var(--space-10);
                    --padding-bottom: var(--space-5);
                    position: relative;
                    display: inline-flex;
                    border-radius: var(--space-40);
                    padding-top: var(--padding-top);
                    padding-bottom: var(--padding-bottom);
                    background-color: var(--dark-10);
                    border: 1px solid var(--dark-15);
                    align-items: center;

                    @media (width <= 1440px) {
                        --padding-top: var(--space-8);
                        --padding-bottom: var(--space-3);
                    }

                    .table-section-item-images-2 {
                        left: var(--space-minus-14);

                    }

                    .table-section-item-images-3 {
                        left: var(--space-minus-29);
                    }

                    .table-section-item-images-4 {
                        left: var(--space-minus-44);
                    }

                    .table-section-item-img-back {
                        position: relative;
                        left: var(--space-19);
                    }

                    img {
                        border-radius: 50%;
                        border: 2px solid var(--dark-40);
                        background-color: var(--dark-20);
                        object-fit: cover;
                        position: relative;
                        @media (width <= 1440px) {
                            height: var(--space-55);
                            width: var(--space-55);

                        }
                    }

                    img:first-child {
                        left: 0;
                    }
                }
            }
        }

        .table-section-item-1 {
            display: grid;
            grid-template-columns: 40% 35% 25%;

            .table-section-item-content-4, .table-section-item-content-2, .table-section-item-content-3 {
                border-bottom: none;
            }

            .table-section-item-content-1, .table-section-item-content-4 {
                border-right: none;
            }

            .table-section-item-content-2 {

                .table-section-item-content-title-2, span {
                    --font-size: var(--space-40);
                    font-weight: 600;
                    font-size: var(--font-size);
                    color: var(--absolute-white);
                    @media (width <= 1440px) {
                        --font-size: var(--space-30);
                    }
                    @media (width <= 764px) {
                        --font-size: var(--space-24);
                    }

                    span {
                        color: var(--yellow-55);
                    }
                }

                .table-section-item-content-title-3 {
                    --font-size: var(--space-18);
                    font-size: var(--font-size);
                    color: var(--grey-60);
                    @media (width <= 1440px) {
                        --font-size: var(--space-14);
                    }

                }
            }

            .table-section-item-content-1 {
                grid-column: 1 / span 4;
                border-top: none !important;

                .table-section-item-title {
                    --padding-top: calc(var(--space-80) * 2);
                    --padding-bottom: var(--space-80);
                    --padding-right: var(--space-50);
                    --padding-left: var(--space-30);

                    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
                    @media (width <= 1440px) {
                        --padding-top: var(--space-80);
                        --padding-bottom: var(--space-80);
                        --padding-right: var(--space-40);
                    }
                    @media (width <= 764px) {
                        --font-size: var(--space-14);
                        --padding-top: var(--space-40);
                        --padding-bottom: var(--space-30);
                        --padding-right: var(--space-15);
                    }

                    .table-section-item-content-title-3 {
                        --font-size: var(--space-18);
                        font-size: var(--font-size);
                        color: var(--grey-50);
                        @media (width <= 1440px) {
                            --font-size: var(--space-17);
                        }
                        @media (width <= 764px) {
                            --font-size: var(--space-14);
                        }
                    }

                    .table-section-item-content-title-2 {
                        --font-size: var(--space-70);
                        --padding-top: var(--space-30);
                        font-family: var(--second-family), sans-serif;
                        font-weight: 500;
                        font-size: var(--font-size);
                        line-height: 1.2;
                        color: var(--absolute-white);
                        padding-top: var(--padding-top);
                        @media (width <= 1440px) {
                            --font-size: var(--space-55);
                            --padding-top: var(--space-20);
                        }
                        @media (width <= 764px) {
                            --font-size: var(--space-30);
                            --padding-top: var(--space-14);
                        }
                    }

                    .table-section-item-content-title-1 {
                        --font-size: var(--space-30);
                        font-weight: 500;
                        font-size: var(--font-size);
                        line-height: 1.2;
                        color: var(--dark-40);
                        @media (width <= 1440px) {
                            --font-size: var(--space-22)
                        }
                        @media (width <= 764px) {
                            --font-size: var(--space-18);
                        }
                    }
                }

            }
        }

        .table-section-item {


            .table-section-item-content {
                --padding-top: var(--space-50);
                --padding-bottom: var(--space-50);

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: start;
                padding-top: var(--padding-top);
                padding-bottom: var(--padding-bottom);
                @media (width <= 1440px) {
                    --padding-top: var(--space-30);
                    --padding-bottom: var(--space-30);
                }
                @media (width <= 764px) {
                    --padding-top: var(--space-20);
                    --padding-bottom: var(--space-20);
                }
            }

            .table-section-item-content {
                border: 1px solid var(--dark-15);
            }
        }

    }

    .table-section-2 {
        display: grid;
        width: 100%;
        grid-template-columns: 33.333% 33.333% 33.333%;
        @media (width <= 764px) {
            grid-template-columns: 100%;
        }

        .table-section-2-item {
            border: 1px solid var(--dark-15);

            .table-section-2-items-text {
                --padding-top: var(--space-50);
                --padding-bottom: var(--space-50);
                --padding-right: var(--space-80);
                display: grid;
                grid-template-columns: 70% 55px;
                grid-template-rows: repeat(4, 1fr);
                padding-top: var(--padding-top);
                padding-bottom: var(--padding-bottom);
                padding-right: var(--padding-right);
                justify-content: flex-end;
                @media (width <= 1440px) {
                    --padding-top: var(--space-40);
                    --padding-bottom: var(--space-40);
                    --padding-right: var(--space-50);

                }

                .table-section-2-items-img {
                    margin: auto 0;
                    @media (width <= 1440px) {
                        width: var(--space-40);
                        height: var(--space-40);


                    }
                }

                .table-section-2-items-text-element-2 {
                    --padding-bottom: var(--space-30);
                    --font-size: var(--space-18);

                    font-size: var(--font-size);
                    padding-bottom: var(--padding-bottom);
                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                        padding-bottom: var(--space-20) ;
                    }
                }

                .table-section-2-items-text-element {
                    --font-size: var(--space-18);
                    color: var(--grey-50);
                    font-size: var(--font-size);

                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                    }
                    @media (width <= 764px) {
                        --font-size: var(--space-14);

                    }
                }

                .table-section-2-items-text-element-1 {
                    --padding-top: var(--space-30);
                    --font-size: var(--space-20);

                    padding-top: var(--padding-top);
                    font-weight: 500;
                    font-size: var(--font-size);
                    color: var(--absolute-white);
                    grid-row: 2 / 3;
                    @media (width <= 1440px) {
                        --font-size: var(--space-18);
                        --padding-top: var(--space-20) ;
                        white-space: nowrap;
                    }
                    @media (width <= 764px) {
                        --font-size: var(--space-16);
                    }
                }

                .table-section-2-items-text-element-2 {
                    grid-row: 3 / 4;
                }

                .table-section-2-items-text-element-3 {
                    grid-row: 4/ 5;
                }

                .table-section-2-items-text-element-4 {
                    grid-row: -4 / -2;
                    @media (width <= 1440px) {
                        img {
                            width: var(--space-54);
                            height: var(--space-44);
                            padding-left: var(--space-10);
                        }

                    }
                }
            }
        }
    }
}

.container-section-1 {

    border-bottom: var(--space-1) solid var(--dark-15);

    .section-1-content {
        background: var(--dark-10);

        .section-1-content-text {
            --padding-top: calc(var(--space-60) * 2);
            --padding-bottom: calc(var(--space-60) * 2);
            --padding-right: var(--space-162);
            --padding-left: var(--space-162);

            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
            @media (width <= 1440px) {
                --padding-top: var(--space-80);
                --padding-bottom: var(--space-80);
                --padding-right: var(--space-80);
                --padding-left: var(--space-80);
            }

            @media (width <= 764px) {
                flex-direction: column;
                align-items: flex-start;
                --padding-top: var(--space-40);
                --padding-bottom: var(--space-40);
                --padding-right: var(--space-16);
                --padding-left: var(--space-16);

            }


            .section-1-content-heading {
                --padding-top: var(--space-20);
                --font-size: var(--space-58);

                font-weight: 500;
                font-size: var(--font-size);
                line-height: 130%;
                color: var(--absolute-white);
                padding-top: var(--padding-top);
                @media (width <= 1440px) {
                    --font-size: var(--space-44);
                }
                @media (width <= 764px) {
                    --font-size: var(--space-28);
                    padding-bottom: var(--space-10);
                }
            }

            .section-1-content-subcontainer {
                --font-size: var(--space-20);
                --padding-top: var(--space-6);
                --padding-right: var(--space-10);

                display: inline;
                border-radius: var(--space-4);
                padding: var(--padding-top) var(--padding-right);
                background: var(--dark-20);
                font-weight: 500;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                    --padding-top: var(--space-4);
                    --padding-right: var(--space-8);

                }
                @media (width <= 764px) {
                    --font-size: var(--space-14);
                }

            }
        }
    }
}

.content-section-2-item-container {
    display: grid;
    grid-template-columns: 40% 60%;

    @media (width <= 764px) {
        grid-template-columns: 100%;
    }
    border-bottom: var(--space-1) solid var(--dark-15);

    .content-section-2-item-content-header {
        --padding-right: var(--space-80);
        --padding-left: var(--space-80);

        padding-right: var(--padding-right);
        padding-left: var(--padding-left);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        .content-section-2-item-content-header-svg{
            --width: var(--space-80);
            --height: var(--space-80);
            width: var(--width);
            height: var(--height);
            @media (width <= 1440px) {
                --width: var(--space-45);
                --height: var(--space-48);
            }
            @media (width <= 764px) {
                --width: var(--space-37);
                --height: var(--space-40);
            }
        }
        @media (width <= 1440px) {
            --padding-right: var(--space-10);
            --padding-left: var(--space-30);
        }
        @media (width <= 790px) {
            --padding-right: var(--space-10);
            --padding-left: var(--space-10);
        }



        @media (width <= 764px) {
            --padding-right: var(--space-80);
            --padding-left: var(--space-80);
            padding-top: var(--space-50);
            padding-bottom: var(--space-50);
            border-bottom: var(--space-1) solid var(--dark-15);
            @media (width <= 764px) {
                --padding-right: var(--space-16);
                --padding-left: var(--space-16);

            }
        }

        .content-section-2-item-content-header-text-1 {
            --padding-top: var(--space-50);
            --padding-bottom: var(--space-16);
            --font-size: var(--space-40);

            font-weight: 600;
            font-size: var(--font-size);
            color: var(--absolute-white);
            padding-top: var(--padding-top);
            padding-bottom: var(--padding-bottom);
            @media (width <= 1440px) {
                --font-size: var(--space-30);
                --padding-top: var(--space-30);
                --padding-bottom: var(--space-10);
            }
            @media (width <= 764px) {
                --font-size: var(--space-24);
            }

            .content-section-2-item-content-header-text-2 {
                --font-size: var(--space-18);
                font-size: var(--font-size);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                }
                @media (width <= 764px) {
                    --font-size: var(--space-14);
                }
            }
        }


    }

    .content-section-2-item-content {
        border-left: var(--space-1) solid var(--dark-15);
        @media (width <= 764px) {
            border-left: unset;

        }
    }

    .content-section-2-items-text {
        --padding-left: var(--space-80);
        --padding-right: var(--space-162);
        --padding-top: var(--space-80);
        --padding-bottom: var(--space-80);

        display: grid;
        grid-template-columns: 50% 50%;
        grid-auto-rows: 50% 50%;
        @media (width <= 764px) {
            grid-template-columns: 1fr;
            grid-auto-rows: 1fr ;
        }
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
        gap: var(--space-30);
        @media (width <= 1440px) {
            --padding-left: var(--space-60);
            --padding-right: var(--space-80);
            --padding-top: var(--space-60);
            --padding-bottom: var(--space-60);
        }
        @media (width <= 764px) {
            --padding-left: var(--space-16);
            --padding-right: var(--space-16);
            --padding-top: var(--space-30);
            --padding-bottom: var(--space-30);
        }

        .content-section-2-items-text-section {
            --padding: var(--space-40);
            border: var(--space-1) solid var(--dark-15);
            border-radius: var(--space-12);
            padding: var(--padding);
            background: var(--dark-10);
            @media (width <= 1440px) {
                --padding: var(--space-30);
            }

            .content-section-2-items-text-1 {
                --font-size: var(--space-24);

                font-weight: 500;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-20);
                }
                @media (width <= 764px) {
                    --font-size: var(--space-18);
                }
            }

            .content-section-2-items-text-2 {
                --padding-top: var(--space-20);
                --font-size: var(--space-16);

                padding-top: var(--padding-top);
                font-size: var(--font-size);
                @media (width <= 764px) {
                    --font-size: var(--space-14);
                }
            }
        }
    }
}

.tabs {
    --column-gap: var(--space-16);
    display: grid;
    grid-template-columns: repeat(6, minmax(1px, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--column-gap);
    @media (width <= 1440px) {
        --column-gap: var(--space-14);


        grid-template-rows: auto  1fr;

        grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
        grid-auto-rows: auto;

    }
}

.tab {
    --padding-top: var(--space-50);
    --padding-bottom: var(--space-0);
    --padding-horizontal: var(--space-80);

    padding: var(--padding-top) var(--padding-horizontal) var(--padding-bottom) var(--padding-horizontal);
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    @media (width <= 1440px) {
        --padding-top: var(--space-40);
        --padding-bottom: var(--space-0);
        --padding-horizontal: var(--space-60);

    }
    @media (width <= 764px) {
        --padding-top: var(--space-5);
        --padding-bottom: var(--space-0);
        --padding-horizontal: var(--space-10);

    }

}

.tab-subtitle {
    --padding-top-bottom: var(--space-30);
    --padding-right-left: var(--space-24);
    grid-column: var(--n) / span 1;
    grid-row: 1;
    display: grid;
    padding: var(--padding-top-bottom) var(--padding-right-left);
    border-radius: var(--space-8);
    border: var(--space-1) solid var(--dark-15);
    cursor: pointer;
    z-index: 1;
    justify-content: center;
    align-items: center;

    .svg-summary {
        display: none;

        @media (width <= 962px) {
            display: inline;
        }
    }

    .text-summary {
        @media (width <= 962px) {
            display: none;
        }
    }

    @media (width <= 1440px) {
        --padding-top-bottom: var(--space-24);
        --padding-right-left: var(--space-20);

    }
    @media (width <= 764px) {
        border: unset;
    }
}

details[open] :is(summary,span, .span) {
    --font-size: var(--space-18);
    font-weight: 500;
    font-size: var(--font-size);
    color: var(--absolute-white);
    background-color: var(--dark-10);
}

details::details-content {
    grid-row: 2;
    grid-column: 1 / -1;
    padding: var(--space-16);
    border-bottom: var(--space-1) solid var(--dark-15);
}

details:not([open])::details-content {
    display: none;
}

.tab-content {
    display: grid;
    grid-template-rows: repeat(3, auto);

    .tab-content-block {
        --padding-top: var(--space-80);
        --padding-bottom: var(--space-80);
        --padding-horizontal: var(--space-80);
        border-top: var(--space-1) solid var(--dark-15);
        display: grid;
        grid-template-columns: auto 1fr auto;
        padding: var(--padding-top) var(--padding-horizontal) var(--padding-bottom) var(--padding-horizontal);
        @media (width <= 1440px) {
            --padding-top: var(--space-60);
            --padding-bottom: var(--space-60);
            --padding-horizontal: var(--space-0);
        }
        @media (width <= 764px) {
            --padding-top: var(--space-40);
            --padding-bottom: var(--space-40);
            --padding-horizontal: var(--space-16);
            grid-template-columns: 1fr;
        }

        .link-blog {
            --padding-left: var(--space-50);
            z-index: 2;
            display: flex;
            align-items: center;
            padding-left: var(--padding-left);
            @media (width <= 1440px) {
                --padding-left: var(--space-40);
            }
            @media (width <= 764px) {
                --padding-top: var(--space-20);
                padding-top: var(--padding-top) ;
                --padding-left: var(--space-0);
            }

            .section-1-content-link {
                --padding-horizontal: var(--space-24);
                --padding-vertical: var(--space-18);
                border: var(--space-1) solid var(--dark-15);
                border-radius: 12px;
                padding: var(--padding-vertical) var(--padding-horizontal);
                align-items: center;
                @media (width <= 1440px) {
                    --padding-horizontal: var(--space-20);
                    --padding-vertical: var(--space-14);
                }
                @media (width <= 764px) {
                    width: 80%;
                    justify-content: center;
                    text-align: center;
                }
            }

        }

        .tab-user-posts {
            .tab-user-posts-buttons {
                display: flex;
                gap: var(--space-10);

            }

            .tab-user-posts-date {
                --font-size: var(--space-20);
                font-size: var(--font-size);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);
                }
            }

            .tab-user-posts-hero {
                --padding-top: var(--space-30);
                --padding-bottom: var(--space-10);
                --font-size: var(--space-26);
                padding-top: var(--padding-top);
                padding-bottom: var(--padding-bottom);

                font-weight: 600;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --padding-top: var(--space-24);
                    --padding-bottom: var(--space-10);
                    --font-size: var(--space-22);
                }
            }

            .tab-user-posts-text {
                --padding-bottom: var(--space-30);
                --font-size: var(--space-18);

                padding-bottom: var(--padding-bottom);
                font-size: var(--font-size);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                }
            }
        }



    }
}
.user-card {
    --padding-right: var(--space-80);
    display: grid;
    grid-template-columns:  max(var(--space-80)) 1fr;
    align-items: start;
    gap: var(--space-16);
    padding-right: var(--padding-right);
    @media (width <= 1440px) {
        grid-template-columns:  max(var(--space-60)) 1fr;
        --padding-right: var(--space-40);
    }

    .user-card__role {
        --font-size: var(--space-18);
        font-size: var(--font-size);
        @media (width <= 1440px) {
            --font-size: var(--space-16);
        }
    }

    .user-card__name {
        --font-size: var(--space-20);
        font-weight: 600;
        font-size: var(--font-size);
        color: var(--absolute-white);
        @media (width <= 1440px) {
            --font-size: var(--space-18);
        }
    }

    .user-card__avatar {
        border-radius: 50%;
        background-color: var(--dark-25);
        @media (width <= 1440px) {
            width: var(--space-60);
            height: var(--space-60);
        }
    }
}
.section-1-content-link {
    --padding-top: var(--space-18);
    --padding-bottom: var(--space-24);
    border: 1px solid var(--dark-15);
    border-radius: var(--space-12);
    padding: var(--padding-top) var(--padding-bottom);
    background-color: var(--dark-08);
    white-space: nowrap;
    @media (width <= 764px) {
        --padding-top: var(--space-14);
        --padding-bottom: var(--space-18);
        margin: 0 auto;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;

    }
}

.section-1-content-link__modification {
    background: var(--dark-10);
    margin: 0 auto;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.content-section-2-item-content-header-text-2_modificator {
    --padding-bottom: var(--space-50);
    --font-size: var(--space-20);
    padding-bottom: var(--padding-bottom);
    font-size: var(--font-size);
    @media (width <= 1440px) {
        --padding-bottom: var(--space-30);
        --font-size: var(--space-16);
    }
    @media (width <= 764px) {
        --font-size: var(--space-14);
    }
}

.sub-container-downloaded {
    --padding: var(--space-30);
    --margin-top: var(--space-60);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: var(--space-1) solid var(--dark-15);
    border-radius: var(--space-13);
    padding: var(--padding);
    background: var(--dark-10);
    margin-top: var(--margin-top);
    @media (width <= 1440px) {
        --padding: var(--space-20);
    }
    @media (width <= 1440px) {
          --margin-top: var(--space-40);
    }
    .sub-container-downloaded-img{
        margin: auto 0;
    }
    .sub-container-downloaded-items {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        .downloaded__label {
            --font-size: var(--space-18);
            font-size: var(--font-size);
            @media (width <= 1440px) {
                --font-size: var(--space-14);
            }
        }

        .downloaded__count {
            --font-size: var(--space-24);
            font-weight: 600;
            font-size: var(--font-size);
            color: var(--absolute-white);
            @media (width <= 1440px) {
                --font-size: var(--space-20);
            }

        }

    }
}
.content-section-2-item-content-block {
    --padding: var(--space-80);
    --gap: var(--space-30);
    display: grid;
    padding-left: var(--padding);
    padding-top: var(--padding);
    padding-bottom: var(--padding);
    gap: var(--gap);
    @media (width <= 1440px) {
        --padding: var(--space-60);
        --gap: var(--space-24);
    }
    @media (width <= 1440px) {
        --padding: var(--space-60);
        --gap: var(--space-24);
    }
    @media (width <= 1086px) {
            --padding: var(--space-20);
            --gap: var(--space-24);
    }
    .content-section-2-item-content-text-last {
        --padding: var(--space-30);
        --border-radius: var(--space-13);
        border: var(--space-1) solid var(--dark-15);
        border-radius: var(--border-radius);
        padding: var(--padding);
        background: var(--dark-10);
        width: 93.5%;
    }

    .content-section-2-item-content-multi {
        --gap: var(--space-20);
        display: grid;
        grid-template-columns: 22% 69%;
        gap: var(--gap);
        @media (width <= 1440px) {
            grid-template-columns: 28% 63%;
        }
        @media (width <= 764px) {
            grid-template-columns: 93%;
        }
        .content-section-2-item-content-link {
            --padding-horizontal: var(--space-24);
            --padding-vertical: var(--space-18);
            --gap: var(--space-10);
            border: var(--space-1) solid var(--dark-15);
            border-radius: 10px;
            padding: var(--padding-vertical) var(--padding-horizontal);
            background: var(--dark-08);
            display: flex;
            align-items: center;
            gap: var(--gap);
            @media (width <= 1440px) {
                --padding-horizontal: var(--space-20);
                --padding-vertical: var(--space-14);
                --gap: var(--space-4);
            }
        }

        .content-section-2-item-content-text-and-link {
            --padding: var(--space-30);
            --border-radius: var(--space-13);
            border: var(--space-1) solid var(--dark-15);
            border-radius: var(--border-radius);
            padding: var(--padding);
            background: var(--dark-10);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .content-section-2-item-content-text-secondary {
                --font-size: var(--space-20);
                font-weight: 600;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);
                }
            }

            .content-section-2-item-content-text-main {
                --font-size: var(--space-18);
                font-size: var(--font-size);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                }
            }
        }

        .content-section-2-item-content-text-2 {
            --padding: var(--space-30);
            --border-radius: var(--space-13);
            border: var(--space-1) solid var(--dark-15);
            border-radius: var(--border-radius);
            padding: var(--padding);
            background: var(--dark-10);
            display: flex;
            flex-direction: column;
            justify-content: center;
            @media (width <= 1440px) {
                --padding: var(--space-24);
            }
            .content-section-2-item-content-text-secondary {
                --font-size: var(--space-20);
                font-weight: 600;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);

                }
            }

            .content-section-2-item-content-text-main {
                --font-size: var(--space-18);
                font-size: var(--font-size);

            }

        }
    }

    .content-section-2-item-content-image {
        img {
            --border-radius: var(--space-12);
            border-radius: var(--border-radius);
            width: 93%;
            height: 100%;
            object-fit: contain;
        }

    }

    .content-section-2-item-content-text {
        display: grid;
        grid-template-columns: 25% 70%;
        align-items: center;
        @media (width <= 764px) {
            grid-template-columns: 1fr;
            gap: var(--space-10);
        }

        .content-section-2-item-content-text-main {
            --font-size: var(--space-24);
            font-weight: 600;
            font-size: var(--font-size);
            color: var(--absolute-white);
            @media (width <= 1440px) {
                --font-size: var(--space-20);

            }

            }
        }
        .content-section-2-item-content-text-secondary-last{
            --font-size: var(--space-20);
            font-weight: 500;
            font-size: var(--font-size);
            color: var(--absolute-white);
            @media (width <= 1440px) {
                --font-size: var(--space-18);
            }
        }
        .content-section-2-item-content-text-secondary {
            --font-size: var(--space-18);
            font-size: var(--font-size);
            @media (width <= 1440px) {
                --font-size: var(--space-16);
            }
        }
    }

.review-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    --padding: var(--space-30);
    --border-radius:var(--space-16) ;
    background: var(--dark-10);
    border: 1px solid var(--dark-15);
    border-radius: var(--border-radius);
    padding: var(--padding);


}

.review-text {
    --font-size: var(--space-18);
    font-size: var(--font-size);
    color: var(--absolute-white);
    position: relative;
    bottom: var(--space-20);
    @media (width <= 1440px) {
        --font-size: var(--space-16);
    }
}
.container-section-comments{
    display: grid;
    grid-template-columns: repeat(3,33.333%);
    @media (width <= 920px) {
        grid-template-columns: 100%;
    }
    .container-comments{

        @media (width <= 920px) {
            border-right: unset;
        }
    }
    .content-comments-elements{
        --padding-top: var(--space-80);
        --padding-bottom: var(--space-80);
        --padding-left: var(--space-50);
        --padding-right: var(--space-50);
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
        @media (width <= 1440px) {
            --padding-top: var(--space-60);
            --padding-bottom: var(--space-60);
            --padding-left: var(--space-40);
            --padding-right: var(--space-40);
        }
        .user-card{
            --padding-boottom: var(--space-40);
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: var(--padding-bottom);
            @media (width <= 1440px) {
                --padding-boottom: var(--space-30);
            }
            .user-card__name{
                --font-size: var(--space-20);
                font-size: var(--font-size);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);
                }
            }
            .user-card__role{
                --font-size: var(--space-18);
                font-size: var(--font-size);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                }
            }
            .user-card__avatar{
                --size: var(--space-60);
                width: var(--size);
                height: var(--size);
                @media (width <= 1440px) {
                    --size: var(--space-40);
                }
            }
        }
    }
}
.container-comments__modification{
    border-left: var(--space-1) solid var(--dark-15);
    @media (width <= 920px) {
        border-left:unset;
    }
}
.section-color{
    background: var(--dark-10);
}
.container-last-section{
    --padding-horizontal: var(--space-162);
    --padding-vertical: var(--space-120);
    padding: var(--padding-vertical) var(--padding-horizontal);
    @media (width <= 1440px) {
        --padding-horizontal: var(--space-80);
        --padding-vertical: var(--space-80);
    }@media (width <= 1440px) {
        --padding-horizontal: var(--space-16);
        --padding-vertical: var(--space-40);
    }
    .container-link{
        --gap: var(--space-10);
        --border-radius: var(--space-12);
        --padding: var(--space-20);
        display: grid;
        grid-template-columns: repeat(3, 33%);
        gap: var(--gap);
        padding: var(--padding);
        background: var(--dark-08);
        border-radius: var(--border-radius);
        border: var(--space-1) solid var(--dark-15);
        justify-content: center;
        @media (width <= 1440px) {
            --padding: var(--space-10);

        }
        @media (width <= 764px) {
            grid-template-columns: 100%;

        }
        .container-link-block{
            --border-radius: var(--space-12);
            --padding: var(--space-40);
            border: var(--space-1) solid var(--dark-15);
            border-radius: var(--border-radius);
            padding: var(--padding);
            background: var(--dark-10);
            @media (width <= 1440px) {
                --padding: var(--space-30);
            }
            .container-link-block-link-text-secondary{
                --font-size: var(--space-18);
                font-size: var(--font-size);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                }
            }
            .container-link-block-link{
                --padding-bottom:var(--space-20);
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                padding-bottom:var(--padding-bottom);
                @media (width <= 1440px) {
                    --padding-bottom:var(--space-16);
                }
                .container-link-block-link-img{
                    img{
                        --size: var(--space-52);
                        width: var(--size);
                        height: var(--size);
                        @media (width <= 1440px) {
                            --size: var(--space-44);
                        }
                    }
                }
                .container-link-block-link-text{
                    --font-size: var(--space-22);
                    font-weight: 600;
                    font-size: var(--font-size);
                    color: var(--absolute-white);
                    @media (width <= 1440px) {
                        --font-size: var(--space-18);
                    }
                }
            }
        }
    }
    .container-first{
        --padding-bottom: var(--space-80);
        --gap: var(--space-80);
        display: grid;
        grid-template-columns: 10% 80%;
        padding-bottom:var(--padding-bottom);
        gap: var(--gap);
        @media (width <= 1440px) {
            --gap: var(--space-60);
            --padding-bottom: var(--space-50);
        }
        @media (width <= 764px) {
            --gap: var(--space-20);
            --padding-bottom: var(--space-50);
            grid-template-columns: 100%;
        }
        .container-first-svg{
            display: flex;
            align-items: center;
            @media (width <= 764px) {
                gap: var(--space-20);
            }
            .container-first-text-1-mob{
                display: none;
                --font-size: var(--space-16);
                --border-radius: var(--space-4);
                --padding-vertical: var(--space-6);
                --padding-horizontal: var(--space-10);
                font-weight: 500;
                font-size: var(--font-size);
                color: var(--absolute-white);
                border-radius: var(--border-radius);
                padding: var(--padding-vertical) var(--padding-horizontal) ;
                background: var(--dark-20);

                @media (width <= 764px) {
                    display: inline;
                }
            }
            svg{
                --size: var(--space-150);
                width: var(--size);
                height: var(--size);
                @media (width <= 1440px) {
                    --size: var(--space-120);
                }
                @media (width <= 764px) {
                    --size: var(--space-80);
                }
            }
        }
        .container-first-text{

            .container-first-text-1{
                display: inline;
                --font-size: var(--space-20);
                --border-radius: var(--space-4);
                --padding-vertical: var(--space-6);
                --padding-horizontal: var(--space-10);
                font-weight: 500;
                font-size: var(--font-size);
                color: var(--absolute-white);
                border-radius: var(--border-radius);
                padding: var(--padding-vertical) var(--padding-horizontal) ;
                background: var(--dark-20);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                    --padding-vertical: var(--space-4);
                    --padding-horizontal: var(--space-8);
                }
                @media (width <= 764px) {
                    display: none;
                }
            }
            .container-first-text-2{
                --font-size: var(--space-58);
                font-family: var(--second-family), sans-serif;
                font-weight: 500;
                font-size: var(--font-size);
                line-height: 130%;
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-44);
                }
                @media (width <= 764px) {
                    --font-size: var(--space-28);
                }
            }
            .container-first-text-3{
                --font-size: var(--space-18);
                font-size: var(--font-size);
                color: var(--grey-50);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                }
            }
            .container-first-text-2 , .container-first-text-3{
                --padding-top: var(--space-30);
                padding-top: var(--padding-top);
                @media (width <= 1440px) {
                    --padding-top: var(--space-20);
                }
            }
        }
    }
}
.hero-section-small-box{
    --padding-horizontal: var(--space-80);
    --padding-vertical: var(--space-80);
    --gap: var(--space-20);
    padding: var(--padding-horizontal) var(--padding-vertical);
    display: grid;
    grid-template-rows: 50% 50%;
    gap: var(--gap);
    border-bottom: var(--space-1) solid var(--dark-15);
    @media (width <= 1440px) {
        --padding-horizontal: var(--space-60);
        --padding-vertical: var(--space-40);
    }@media (width <= 764px) {
        --padding-horizontal: var(--space-40);
        --padding-vertical: var(--space-16);
        grid-template-rows: 20% 50%;
    }
    .hero-section-small-box-bottom{
        --gap: var(--space-80);
        display: grid;
        grid-template-columns: 20% 80%;
        align-items: center;
        gap: var(--gap);
        justify-items: center;
        justify-content: start;
        @media (width <= 1440px) {
            --gap: var(--space-60);
        }
        @media (width <= 764px) {
            grid-template-columns: 100%;
            --gap:var(--space-14) ;
        }
    }
}
.hero-section-small-box-text-heavy{
    --font-size: var(--space-80);
    font-weight: 500;
    font-size: var(--font-size);
    line-height: 130%;
    color: var(--absolute-white);
    @media (width <= 1440px) {
        --font-size: var(--space-55);
    }
    @media (width <= 764px) {
        --font-size: var(--space-28);
    }
}
.hero-section-small-box-text-normal{
    --font-size: var(--space-18);
    font-size: var(--font-size);
    color: var(--grey-60);
    max-width: 80%;
    @media (width <= 1440px) {
        --font-size: var(--space-16);
    }
    @media (width <= 764px) {
        --font-size: var(--space-14);
    }
}
.tab-user-posts-button {
    --padding-horizontal: var(--space-16);
    --padding-vertical: var(--space-8);

    display: flex;
    align-items: center;

    border: 1px solid var(--dark-15);
    border-radius: var(--space-30);
    padding: var(--padding-vertical) var(--padding-horizontal);
    background: var(--dark-10);
    z-index: 3;
    cursor: pointer;
    transition: background 0.2s ease;
    @media (width <= 1440px) {
        --padding-horizontal: var(--space-12);
        --padding-vertical: var(--space-6);
    }

    svg {
        padding-right: var(--space-4);
        transition: stroke 0.2s ease;

    }

    & --like.active svg {
        stroke: #f50;
        fill: #f50;
    }


}
.news-section-content{
    border-bottom: var(--space-1) solid var(--dark-15);
    display: grid;
    grid-template-rows: 55% 45%;
    @media (width <= 1440px) {
        grid-template-rows: 45% 45%;
    }
    @media (width <= 1048px) {
        grid-template-rows: 38% 50%;
    }
    @media (width <= 764px) {
        height: 100%;
        grid-template-rows: auto;
    }
    .news-section-content-bottom{
        --gap: var(--space-30);
        display: grid;
        grid-template-columns: repeat(3, minmax(280px, 1fr));
        gap: var(--gap);
        @media (width <= 1048px) {
            grid-template-columns: repeat(1, minmax(auto, 1fr));
            justify-items: center;
        }
        .news-section-content-bottom-container{
                display: grid;
            --gap: var(--space-20);
            gap: var(--gap);
            .news-section-content-bottom-text-heavy{
               --font-size: var(--space-20);
                font-weight: 600;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);
                }
            }
            .news-section-content-bottom-text-normal{
                --font-size: var(--space-20);
                font-weight: 400;
                font-size: var(--font-size);
                color: var(--grey-60);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);
                }
            }
            .news-section-content-bottom-img{
                max-width: 100%;
                max-height: 100%;
                border-radius: var(--space-12);
            }
            .news-section-content-bottom-container-group{
                display: grid;
                grid-template-columns: 45% 50%;
                align-items: center;
                @media (width <= 680px) {
                    grid-template-columns: 100%;
                    gap: var(--space-10);
                }
                .tab-user-posts-buttons{
                    --gap: var(--space-10);
                    display: grid;
                    grid-template-columns: 40% 35%;
                    gap: var(--gap);
                    @media (width <= 1440px) {
                        grid-template-columns: 50% 45%;
                        --gap: var(--space-5);
                    }
                }
            }
        }

    }
    .news-section-content-head{
        --gap: var(--space-80);
        display: grid;
        grid-template-columns: 30% 60%;
        border-bottom: var(--space-1) solid var(--dark-15);
        gap: var(--gap);
        @media (width <= 1440px) {
            --gap: var(--space-40);
        }
        @media (width <= 1048px) {
            grid-template-columns: 100%;
        }

        .news-section-content-img-left{
            max-width: 100%;
            max-height: 100%;
            border-radius: var(--space-12);
            @media (width <= 764px) {
                width: 100%;
            }
        }
        .news-section-content-head-right{
            .news-section-content-head-right-communicate{
                display: grid;
                grid-template-columns: 80% 15%;
                @media (width <=680px) {
                    grid-template-columns: 100%;
                    grid-template-rows: 50% 50%;
                    gap: var(--space-10);
                    align-items:start ;
                }
                .tab-user-posts-buttons{
                    --gap: var(--space-10);
                    display: grid;
                    grid-template-columns: 15% 12%;
                    gap: var(--gap);
                    @media (width <= 1440px) {
                        grid-template-columns: 20% 15%;
                    }
                    @media (width <= 642px) {
                        grid-template-columns: 25% 20%;
                    }
                    @media (width <= 528px) {
                        grid-template-columns: 30% 25%;
                    }
                }
            }
            .news-section-content-head-right-text-group{
                --padding-vertical: var(--space-50);
                --gap: var(--space-50);
                padding-top: var(--padding-vertical);
                padding-bottom: var(--padding-vertical);
                display: grid;
                grid-template-columns: 16% 16% 16%;
                gap: var(--gap);
                @media (width <= 1440px) {
                    --padding-vertical: var(--space-40);
                    grid-template-columns: 20% 20% 20%;
                }
                @media (width <= 764px) {
                    --padding-vertical: var(--space-40);
                    grid-template-columns: 25% 25% 25%;
                }
                .news-section-content-head-right-group-top{
                    --font-size: var(--space-18);
                    font-size: var(--font-size);
                    color: var(--grey-60);
                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                    }
                    @media (width <= 764px) {
                        --font-size: var(--space-14);
                    }
                }
                .news-section-content-head-right-group-bottom{
                    --font-size: var(--space-18);
                    font-size: var(--font-size);
                    color: var(--absolute-white);
                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                    }
                    @media (width <= 764px) {
                        --font-size: var(--space-14);
                    }
                }
            }
            .news-section-content-head-right-text-heavy{
                --font-size: var(--space-32);
                --padding-bottom: var(--space-30);
                padding-bottom: var(--padding-bottom);
                font-weight: 600;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-24);
                    --padding-bottom: var(--space-14);
                }
            }
            .news-section-content-head-right-text-normal{
                --font-size: var(--space-20);
                font-size: var(--font-size);
                color: var(--grey-60);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);
                }
            }
        }
    }
}
.news-section-content-head , .news-section-content-bottom{
    --padding-horizontal: var(--space-80);
    --padding-vertical: var(--space-80);
    padding: var(--padding-horizontal) var(--padding-vertical);
    @media (width <= 1440px) {
        --padding-horizontal: var(--space-60);
        --padding-vertical: var(--space-60);
    }
    @media (width <= 764px) {
        --padding-horizontal: var(--space-60);
        --padding-vertical: var(--space-10);
    }

}
.container-grid-video{
    --padding-horizontal: var(--space-162);
    display: grid;
    grid-template-columns: repeat(2 , 50%);
    padding-left: var(--padding-horizontal);
    padding-right: var(--padding-horizontal);
    justify-items: center;
    @media (width <= 1440px) {
        --padding-horizontal: var(--space-10);
        grid-template-columns: 100%;
    }

    .container-grid-video-card{
        --padding-vertical: var(--space-80);
        display: grid;
        padding-top: var(--padding-vertical);
        padding-bottom: var(--padding-vertical);
        grid-template-rows: min(412px) 20%;
        width: 90%;
        @media (width <= 1440px) {
            --padding-vertical: var(--space-60);
        }
        @media (width <= 764px) {
            --padding-vertical: var(--space-40);
        }
        .container-grid-video-card-bottom-text-heavy{
            --padding-top: var(--space-30);
            --padding-bottom: var(--space-10);
            --font-size: var(--space-24);
            padding-bottom: var(--padding-bottom);
            padding-top: var(--padding-top);
            font-weight: 600;
            font-size: var(--font-size);
            color: var(--absolute-white);
            @media (width <= 1440px) {
                --font-size: var(--space-20);
            }
        }
        .container-grid-video-card-bottom-text-normal{
            --font-size: var(--space-18);
            font-size: var(--font-size);
            color: var(--grey-60);
            @media (width <= 1440px) {
                --font-size: var(--space-16);
            }
        }
        .container-grid-video-card-top{
            background-image: url("./images/videos/poster-1.jpg");
            background-size: cover;
            background-position: center;
            border-radius: var(--space-12);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: relative;
            overflow: hidden;


            
            .container-grid-video-card-top-button{
                --padding: var(--space-20);
                padding: var(--padding);
                .container-grid-video-card-top-button-svg{
                    --size: var(--space-56);
                    width: var(--size);
                    height: var(--size);
                    @media (width <= 1440px) {
                        --size: var(--space-40);
                    }
                }
            }
                .container-grid-video-card-top-text{
                    background: none;
                    --padding: var(--space-30);
                    --font-size: var(--space-18);
                    padding: var(--padding);
                    font-size: var(--font-size);
                    color: var(--grey-50);
                    @media (width <= 1440px) {
                        --font-size: var(--space-14);
                    }
                }

        }
    }
}
.banner-container{
    display: flex;
    width: 100%;
    height: 69vh;
    background-image:url("./images/blog-details/Image.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: flex-end;
    @media (width <= 765px) {
        height: 50vh;
    }
    .banner-container-text{
        --padding-bottom: var(--space-40);
        --font-size: var(--space-64);
        font-weight: 600;
        font-size: var(--font-size);
        text-align: center;
        color: var(--absolute-white);
        padding-bottom: var(--padding-bottom);
        @media (width <= 1440px) {
            --font-size: var(--space-44);
        }
        @media (width <= 764px) {
            --font-size: var(--space-28);
        }
    }
}

.blog-comments-containers {
    display: grid;
    grid-template-columns: 60% 40%;
    @media (width <= 1034px) {
        grid-template-columns: 100%;
    }
    .blog-comments-container {
        border-right: var(--space-1) solid var(--dark-15);
        @media (width <= 1034px) {
            border-right: unset;
        }
        .blog-comments-left {
            display: grid;
            grid-template-rows: auto 1fr;

            .blog-comment-left-bottom {
                --padding-horizontal: var(--space-162);
                --padding-vertical: var(--space-60);
                --gap: var(--space-24);
                display: grid;
                padding: var(--padding-vertical) var(--padding-horizontal);
                row-gap: var(--gap);
                @media (width <= 1440px) {
                    --padding-horizontal: var(--space-80);
                    --padding-vertical: var(--space-60);
                }
                .blog-comment-left-bottom-btn {
                    --padding-vertical: var(--space-14);
                    --padding-horizontal: var(--space-24);
                    --border-radius: var(--space-12);
                    --font-size: var(--space-18);
                    display: flex;
                    border: var(--space-1) solid var(--dark-15);
                    border-radius: var(--border-radius);
                    padding: var(--padding-vertical) var(--padding-horizontal);
                    font-size: var(--font-size);
                    color: var(--grey-60);
                    align-items: center;
                    justify-content: center;
                }

                .blog-comment-left-bottom-text-heavy {
                    --font-size: var(--space-20);
                    font-weight: 500;
                    font-size: var(--font-size);
                    color: var(--absolute-white);
                }

                .blog-comment-left-bottom-text-normal {
                    --font-size: var(--space-18);
                    font-size: var(--font-size);
                    color: var(--grey-60);
                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                    }
                }
            }

            .blog-comment-left-top {
                --padding-horizontal: var(--space-162);
                --padding-vertical: var(--space-60);
                --gap: var(--space-14);
                display: grid;
                padding: var(--padding-vertical) var(--padding-horizontal);
                row-gap: var(--gap);
                border-bottom: var(--space-1) solid var(--dark-15);
                @media (width <= 1440px) {
                    --padding-horizontal: var(--space-80);
                    --padding-vertical: var(--space-60);
                }
                .blog-comment-left-top-text-heavy {
                    --font-size: var(--space-20);
                    font-weight: 500;
                    font-size: var(--font-size);
                    color: var(--absolute-white);
                }

                .blog-comment-left-top-text-normal {
                    --font-size: var(--space-18);
                    font-size: var(--font-size);
                    color: var(--grey-60);
                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                    }
                }
            }
        }

        .blog-comments-right {
            display: grid;
            grid-template-rows: 20% 80%;
            @media (width <= 1034px) {
                grid-template-columns: 100%;
            }
        }
    }

    .expandable-content {
        --padding-bottom: var(--space-20);
        max-height: 400px;
        overflow: hidden;
        transition: max-height 0.7s ease-in-out;
        position: relative;

        display: grid;
        row-gap: var(--gap);
        padding-bottom: var(--padding-bottom);
    }

    .expandable-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 200px;


        background: linear-gradient(to bottom,
        rgba(20, 20, 20, 0),
        rgb(20, 20, 20)
        );
        pointer-events: none;
    }

    .expandable-content.expanded {
        max-height: 9999px;
    }

    .expandable-content.expanded::after {
        display: none;
    }

    .blog-comment-left-bottom-btn.expanded .blog-comment-left-bottom-btn-svg {
        transform: rotate(180deg);
        transition: transform 0.3s;
    }

    .tab-user-posts-buttons {
        --padding-horizontal: var(--space-80);
        --padding-vertical: var(--space-50);
        --gap: var(--space-14);
        display: flex;
        column-gap: var(--gap);
        justify-content: center;
        padding: var(--padding-vertical) var(--padding-horizontal);
        border-bottom: var(--space-1) solid var(--dark-15);
    }

    .blog-comment-right-bottom {
        --padding-vertical: var(--space-80);
        --padding-right: var(--space-162);
        padding: var(--padding-vertical) var(--padding-right) var(--padding-vertical) var(--padding-vertical);
        @media (width <= 1440px) {
            --padding-vertical: var(--space-60);
            --padding-right: var(--space-80);
        }
        @media (width <= 1034px) {
           border-bottom: var(--space-1) solid var(--dark-15);
        }

        .blog-comment-right-bottom-info-group {
            --gap: var(--space-20);
            --padding-bottom: var(--space-50);
            display: grid;
            grid-template-columns: 50% 50%;
            gap: var(--gap);
            padding-bottom: var(--padding-bottom);

            .blog-comment-right-bottom-info-group-elem {
                display: grid;
                --gap: var(--space-10);
                gap: var(--gap);

                .blog-comment-right-bottom-info-group-elem-top {
                    --font-size: var(--space-18);
                    font-size: var(--font-size);
                    color: var(--grey-60);
                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                    }
                }

                .blog-comment-right-bottom-info-group-elem-bottom {
                    --font-size: var(--space-18);
                    font-size: var(--font-size);
                    font-weight: 500;
                    color: var(--absolute-white);
                    @media (width <= 1440px) {
                        --font-size: var(--space-16);
                    }
                }
            }
        }
    }

    .blog-comment-right-bottom-table-content-ul {
        --padding: var(--space-20);
        display: grid;
        border-radius: var(--space-12);
        background-color: var(--dark-10);
        padding: var(--padding);

    }

    .blog-comment-right-bottom-table-content-li {
        color: var(--absolute-white);
        --font-size: var(--space-18);
        font-size: var(--font-size);
        padding: var(--space-14) var(--space-16);
        cursor: pointer;
        line-height: 1.4;

        border-radius: var(--space-4);
        @media (width <= 1440px) {
            --font-size: var(--space-16);
        }
    }
}
.blog-comment-right-bottom-info-group-elem-top-table{
    --padding: var(--space-5);
    --padding-bottom: var(--space-20);
    --font-size: var(--space-18);
    padding: var(--padding) var(--padding) var(--padding-bottom);
    font-size: var(--font-size);
    line-height: 150%;
    letter-spacing: -0.03em;
    color: var(--grey-60);
    @media (width <= 1440px) {
        --font-size: var(--space-16);
    }
}
.review-stars-modification{
    position: unset;
}
.content-section-2-item-content-header{

    .content-section-2-item-content-header-link-text-group{
        --gap: var(--space-40);
        --padding: var(--space-30);
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--gap);
        border: var(--space-1) solid var(--dark-15);
        border-radius: var(--space-13);
        padding: var(--padding);
        background: var(--dark-10);
        @media (width <= 1440px) {
            --gap: var(--space-0);
        }
        .content-section-2-item-content-header-text{
            --font-size: var(--space-18);
            font-size: var(--font-size);
            color: var(--grey-60);
            @media (width <= 1440px) {
                --font-size: var(--space-16);
            }
        }
        .content-section-2-item-content-header-text-heavy{
            --font-size: var(--space-18);
            font-size: var(--font-size);
            font-weight: 500;
            color: var(--absolute-white);
            @media (width <= 1440px) {
                --font-size: var(--space-16);
            }
        }

    }
    .content-section-2-item-content-header-group-star{
        --gap: var(--space-60);
        --padding-bottom: var(--space-30);
        display: flex;
        align-items: center;
        column-gap: var(--gap);
        padding-bottom: var(--padding-bottom);

        .content-section-2-item-content-header-text-heavy{
            --font-size: var(--space-40);
            font-weight: 600;
            font-size:var(--font-size);
            color: var(--absolute-white);
            @media (width <= 1440px) {
                --font-size: var(--space-24);
            }
        }
    }
    .content-section-2-item-content-header-logo-left-container{
        --padding-bottom: var(--space-50);
        padding-bottom: var(--padding-bottom);
        @media (width <= 1440px) {
            --padding-bottom: var(--space-40);
        }
    }
    .content-section-2-item-content-header-logo-left{
        --size: var(--space-48);
        @media (width <= 1440px) {
            width: var(--size);
            height: var(--size);
        }

    }
}
.content-section-2-item-content-image-modification{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("/images/blog-details/Container.png");
   
    height: 50vh;
    width: 100%;
    background-repeat: no-repeat;

}
.content-section-2-item-content-block{
    .content-section-2-item-content-group-attribute-container{
        --gap: var(--space-20);
        display: grid;
        grid-template-columns: 30% 30% 30%;

        column-gap: var(--gap);
        .content-section-2-item-content-group-atribut{
            display: flex;
            flex-direction: column;
            justify-content: center;
            --gap: var(--space-10);
            --padding: var(--space-30);
            border: var(--space-1) solid var(--dark-15);
            border-radius: var(--space-13);
            padding: var(--padding);
            background: var(--dark-10);
           gap: var(--gap);
            .content-section-2-item-content-block-text-top-normal{
                --font-size: var(--space-18);
                font-size: var(--font-size);
                color: var(--grey-60);
                @media (width <= 1440px) {
                    --font-size: var(--space-16);
                }
            }
            .content-section-2-item-content-block-text-bottom-heavy{
              --font-size: var(--space-20);
                font-weight: 500;
                font-size: var(--font-size);
                color: var(--absolute-white);
                @media (width <= 1440px) {
                    --font-size: var(--space-18);
                }
            }
        }
    }
    .content-section-2-item-content-block-text-bottom-normal{
        --font-size: var(--space-18);
        font-weight: 400;
        font-size: var(--font-size);
        color: var(--grey-60);
        @media (width <= 1440px) {
            --font-size: var(--space-16);
        }
    }
    .content-section-2-item-content-block-text-top-heavy{
       --font-size: var(--space-26);
        font-weight: 600;
        font-size: var(--font-size);
        color: var(--absolute-white);
        @media (width <= 1440px) {
            --font-size: var(--space-22);
        }
    }
}
.content-section-2-item-content-header-modification{
        padding-right: var(--space-50);
        padding-left: var(--space-30);
}
.content-section-2-item-container-modification{
    @media (width <= 1066px) {
        grid-template-columns: 1fr;
    }
}
.content-section-2-item-content-modification{
    @media (width <= 1066px) {
        border-left: unset !important;
        border-top: var(--space-1) solid var(--dark-15);
    }
}
.content-section-2-item-content-header-modification{
    padding-top: var(--space-30);
    padding-bottom: var(--space-30);
}
.hero-section-small-box-text-heavy-modification{
    display: inline;
    @media (width <= 1026px) {
        display: none;
    }
}
.hero-section-small-box-bottom-modification{
    @media (width <= 1026px) {
        grid-template-columns: 1fr !important;
        padding-top: var(--space-30);
    }
}
.hero-section-small-box-text-heavy-span{
    display: none;
    @media (width <= 1026px) {
        display: inline;
    }
}
.content-section-2-item-content-image-v2{
    background-image: url("/images/blog-details/Container2.png");
}
.container-grid-video-modification{
    grid-template-columns: repeat(3, 33.333%);
    @media (width <= 1440px) {
        grid-template-columns: repeat(2, 50%);
    }
    @media (width <= 762px) {
        grid-template-columns: 100%;
    }
}
.container-grid-video-card-bottom{
    .section-1-content-link{
        margin-top: var(--space-30);
    }
}
.container-grid-video-card-modification{
    grid-template-rows: min(290px) 50% !important;
}
.container-grid-video-card-bottom{
    display: grid;
    grid-template-rows: repeat(3, 33.333%);
    .container-grid-video-card-bottom-link{
        --padding-top: var(--space-20);
        padding-top: var(--padding-top);
    }
}


.content-section-2-item-content-block {
    & .content-section-2-item-content-image {
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: relative;
        background-position: center center;
        border-radius: var(--space-12);
        overflow: hidden;
    }
}
.container-grid-video-card-top-button{
    --padding: var(--space-20);
    padding: var(--padding);
}

.container-section-1__modification{
    border-bottom: unset ;
    .table-section-1__modification{
        grid-template-columns: auto;
        .table-section-item__modification{
            grid-template-columns: auto auto auto auto;
            @media (width <= 596px) {
                grid-template-columns: auto auto auto auto  ;
            }
            .table-section-item-content__modification{
                border: unset;
                border-right: var(--space-1) solid var(--dark-15);
                border-bottom: var(--space-1) solid var(--dark-15);
                @media (width <= 632px) {
                    --padding-vertical: var(--space-10);
                    padding-left: var(--padding-vertical);
                    padding-right: var(--padding-vertical);
                }
            }
            .table-section-item-content__modification:last-child{

                border-right: unset;
            }
        }
    }
}
.section-1-content-container-links{
    display: flex;
    --padding:var(--space-10) ;
    --gap: var(--space-10) ;
    border: var(--space-1) solid var(--dark-15);
    border-radius: var(--space-10);
    padding: var(--padding) ;
    gap: var(--gap) ;
    background: var(--dark-08);
    .section-1-content-container-link{
        --padding-vertical: var(--space-18);
        --padding-horizontal: var(--space-38);
        --font-size: var(--space-18);
        border: var(--space-1) solid var(--dark-15);
        border-radius: var(--space-10);
        padding: var(--padding-vertical) var(--padding-horizontal);
        color: var(--grey-60);
        font-size: var(--font-size);
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

}
.section-1-content-container-link-active{
    background: var(--dark-15);
    color: var(--absolute-white)!important;
}
.content-section-2-item-content-block-group-link-text{
    display: grid;
    grid-template-columns: 60% 33%;
    align-items: baseline;
    gap: var(--space-10) ;
    @media (width <= 1434px) {

        grid-template-columns: 95%;
    }
}
.tab-content-view {
    display: none;
}

.tab-content-view.active {
    display: block;
}

.section-1-content-container-link.active {
    background: #1f1f1f;
    color: #fff;
}
.downloads-section-group{

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-20);
    @media (width <= 1480px) {
        grid-template-columns: 1fr 1fr;

        .downloads-section-container:nth-child(3) {
            grid-column: 1 / -1;
            justify-self: center;
            width: 100%;
            max-width: 800px;
        }
    }
    @media (width <= 888px) {
        grid-template-columns: 100%;

    }
    .downloads-section-container{
        --padding-vertical: var(--space-80);
        --padding-horizontal: var(--space-40);
        padding: var(--padding-vertical) var(--padding-horizontal);
        display: grid;
        --gap: var(--space-20);
        gap: var(--gap);
        .downloads-section-item-img img {
            width: 100%;
            height: auto;
            border-radius: var(--space-12);
            object-fit: cover;
        }
        @media (width <= 1528px) {
            --padding-vertical: var(--space-30);
            --padding-horizontal: var(--space-20);
        }
        .downloads-section-item-links{
            --gap: var(--space-20);
            display: grid;
            grid-template-columns: 45% 45%;
            column-gap: var(--gap);
        }
        .downloads-section-item-text-heavy{
            --font-size: var(--space-22);
            font-weight: 600;
            font-size: var(--font-size);
            color: var(--absolute-white);
        }
        .downloads-section-item-text-normal{
            --font-size: var(--space-18);
            font-size: var(--font-size);

            color: var(--grey-60);
        }
    }
    .downloads-section-item-img{
        img{
            border-radius: var(--space-12);
        }
    }
}
.section-1-content-link__modification-color{
    background: var(--dark-08);
}
.simple-rating {
    display: inline-block;
    border: var(--space-1) solid var(--dark-15);
    border-radius: var(--space-30);
    padding: var(--space-10) var(--space-16);
    position: relative;
    margin-bottom: var(--space-40);
}

/* УБИРАЕМ content: "★★★★★", чтобы не было дублирования */
.simple-rating::before {
    display: none;
}

.simple-rating__items {
    display: flex;
    flex-direction: row-reverse; /* Для правильной работы селектора ~ */
}

.simple-rating__item {
    /* Скрываем инпуты полностью */
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.simple-rating__label {
    font-size: var(--space-30);
    cursor: pointer;
    color: var(--grey-60); /* Цвет пустой звезды */
    transition: color 0.2s ease;
    padding: 0 2px; /* Небольшой отступ между звездами */
}

.simple-rating__label::before {
    content: "★";
}
.simple-rating__item:checked,
.simple-rating__item:checked ~ .simple-rating__label{
    color: var(--yellow-70);
}
.simple-rating__label:hover ,
.simple-rating__label:hover ~ .simple-rating__label,
.simple-rating__label:checked ~ .simple-rating__label:hover{
    color:var(--yellow-90);
}
.icon-tabler-layout-grid{
    width: var(--space-24);
    height: var(--space-24);
}