:root {
    font-size: 0.8vw;
    --font-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --font-mono: "Fira Code VF", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    --smooth-shadow: 0px 1.3px 2.2px rgba(0, 0, 0, .02), 0px 3.1px 5.3px rgba(0, 0, 0, .028), 0px 5.8px 10px rgba(0, 0, 0, .035), 0px 10.3px 17.9px rgba(0, 0, 0, .042), 0px 19.2px 33.4px rgba(0, 0, 0, .05), 0px 46px 80px rgba(0, 0, 0, .07);
    --header-background-color-0-0-0: 0, 0, 0;
    --dropmenu-color-hover-90-185-0: 90, 185, 0;
    --icons-color-153: 153, 153, 153;
    --menu-border-bottom-74: 74, 74, 74;
    --body-background-color-51: 51, 51, 51;
    --header-background-color-35: 35, 35, 35;
}

.description {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 50vw;
    margin: 0 auto;
    font-size: 0.8vw;
    background-color: rgba(var(--header-background-color-0-0-0), 0.2);
    gap: 1.8vw;
    border-radius: 1.5vw;
    padding: 1vw;
    box-sizing: border-box;
    transition: all 0.1s ease;
    text-align: left;
    transition: background-color 0.2s ease; /* Плавный переход для фильтра */
    z-index: 0;
    -webkit-box-shadow: 0px 15px 10px 0px rgba(var(--header-background-color-0-0-0), 0.2),
                        0px 4px 5px 0px rgba(var(--header-background-color-0-0-0), 0.05);
    -moz-box-shadow: 0px 15px 10px 0px rgba(var(--header-background-color-0-0-0), 0.2),
                     0px 4px 5px 0px rgba(var(--header-background-color-0-0-0), 0.05);
    box-shadow: 0px 15px 30px 0px rgba(var(--header-background-color-0-0-0), 0.3),
                0px 4px 5px 0px rgba(var(--header-background-color-0-0-0), 0.05);
}

.text-content {
    display: flex;
    position: relative;
    color: rgb(var(--icons-color-153));
    flex-direction: column;
    gap: 0.5vw;
}


.text-content p {
    max-height: 11vh;
    overflow: auto;
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */

}
  
  
.img_description {
    width: 10vw;
    height: 10vw;
    border-radius: 1.2vw;
    max-width: 10vw;
    max-height: 10vw;
    object-fit: cover;
    transition: all 0.3s ease;
}

.h1_description {
    margin: 0;
    color: white;
    background-size: contain;
    font-size: 0.8vw;
    transition: all 0.3s ease;
}

.h1_description li,ul {
    padding-left: 1.5em;
    color: white;
}

.h1_description ol {
    list-style: none;
    counter-reset: li;
}

.h1_description li,ol {
    padding-left: 1.5em;
}


.description-center {
    position: absolute;
    top: 50%;  /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%);  /* Смещение для точного центрирования */
    gap: 0.9vw;
    min-width: 70vw;
    background-color: rgba(var(--header-background-color-0-0-0), 0.5);
    border-radius: 2vw;
    box-sizing: border-box;
    z-index: 10;
    text-align: center;
    justify-content: center;
    align-items: center;
}

a .description:hover {
    background-color: rgba(var(--header-background-color-0-0-0), 0.325);
}


/* Адаптация до 2560px */
@media screen and (max-width: 2560px) {
    .description {
        font-size: 1.1vw;
    }

    .img_description {
        max-width: 10vw;
    }

    .h1_description {
        font-size: 1.3vw;
    }

    .back_text {
        font-size:8vw;
    }
}

/* Адаптация до 1920px */
@media screen and (max-width: 1920px) {
    .description {
        font-size: 1vw;
    }

    .img_description {
        max-width: 12vw;
    }

    .h1_description {
        font-size: 1.2vw;
    }
    
    .back_text {
        font-size:10vw;
    }
}

/* Адаптация до 1600px */
@media screen and (max-width: 1600px) {
    .description {
        font-size: 0.9vw;
    }

    .img_description {
        max-width: 11vw;
    }

    .h1_description {
        font-size: 1.1vw;
    }

    .back_text {
        font-size:10vw;
    }
}

/* Адаптация до 1440px */
@media screen and (max-width: 1440px) {

    .img_description {
        max-width: 10vw;
    }

    .h1_description {
        font-size: 1vw;
    }
    .back_text {
        font-size:10vw;
    }
}

/* Мобильная версия до 1280px */
@media screen and (max-width: 1280px) {

    .img_description {
        max-width: 9vw;
    }

    .h1_description {
        font-size: 1vw;
    }
    .back_text {
        font-size:10vw;
    }
}

/* ПК версия 1081px и выше */
@media screen and (min-width: 1081px) {
    .description, .description-center {
        display: flex;
        align-items: center;
    }
    

    .left {
        order: -1;
    }
    .right {
        order: 1;
    }
    .back_text {
        font-size:10vw;
    }
}

/* Мобильная версия до 1080px */
@media screen and (max-width: 1080px) {
    .description, .description-center {
        position: relative;
        top: 8vw;
        padding: 3vw;
        border-radius: 0;
        flex-direction: column;
        font-size: 2.8vw;
        margin-top: 50px;
    }

    .img_description {
        object-fit: cover;
        width: 100%;
        height: 40vw;
        border-radius: 3vw 3vw 0 0;
        max-width: 100%;
    }

    .h1_description {
        text-align: center;
        justify-content: center;
        align-items: center;
        font-size: 5vw;
    }

    .back_text {
        font-size:14vw;
    }
    .text-content p {
        max-height: 30vh;
    }
}

/* Мобильная версия до 1024px */
@media screen and (max-width: 1024px) {
    .description, .description-center {
        position: relative;
        flex-direction: column;
        font-size: 3.2vw;
    }


    .h1_description {
        font-size: 5.2vw;
    }

    .back_text {
        font-size:12vw;
    }
}

/* Мобильная версия до 900px */
@media screen and (max-width: 900px) {
    .description, .description-center {
        position: relative;
        font-size: 3.4vw;
    }


    .h1_description {
        font-size: 5.4vw;
    }

    .back_text {
        font-size:18vw;
    }
}

/* Мобильная версия до 768px */
@media screen and (max-width: 768px) {
    .description, .description-center {
        position: relative;
        font-size: 3.6vw;
    }


    .h1_description {
        font-size: 5.6vw;
    }
    .back_text {
        font-size:20vw;
    }
}

/* Мобильная версия до 480px */
@media screen and (max-width: 480px) {
    .description, .description-center {
        position: relative;
        font-size: 4.8vw;
    }


    .h1_description {
        font-size: 6.8vw;
    }

    .back_text {
        font-size:20vw;
    }
}

/* Мобильная версия до 320px */
@media screen and (max-width: 320px) {
    .description, .description-center {
        font-size: 5vw;
    }


    .h1_description {
        font-size: 7vw;
    }

    .back_text {
        font-size:20vw;
    }
}