: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;
}

.background {
    width: 100%;
    height: var(--height-background);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    -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);
}

.background > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    object-fit: cover;
    min-width: 110%;
    min-height: 110%;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

.center {
    justify-content: center;
    align-items: center;
    margin-top: 2vw;
    padding: 3vw;
    width: 100%;
}

/* Адаптация до 2560px */
@media screen and (max-width: 2560px) {
    .background {
        height: calc(5vw+var(--height-background));
    }

    .background > img {
        width: 100%;
        margin-top: var(--margin-top-var);
    }
}

/* Адаптация до 1920px */
@media screen and (max-width: 1920px) {
    .background {
        height: calc(2vw+var(--height-background));
    }

    .background > img {
        width: 110%;
        margin-top: 0;
    }
}

/* Адаптация до 1600px */
@media screen and (max-width: 1600px) {
    .background {
        height: calc(1vw+var(--height-background));
    }

    .background > img {
        width: 115%;
    }
}

/* Адаптация до 1440px */
@media screen and (max-width: 1440px) {
    .background {
        height: calc(0.5vw+var(--height-background));
    }

    .background > img {
        width: 120%;
    }
}

/* Адаптация до 1280px */
@media screen and (max-width: 1280px) {
    .background {
        height: var(--height-background);
    }

    .background > img {
        width: 125%;
    }
}

/* ПК версия от 1025px и выше */
@media screen and (min-width: 1081px) {
    .background {
        height: var(--height-background);
    }

    .background > img {
        width: 100%;
    }
}

/* ПК версия от 1025px и выше */
@media screen and (max-width: 1080px) {
    .background {
        height: calc(55vw+var(--height-background));
    }

    .background > img {
        width: 100%;
    }
    .center {
        top: 0%;
        width: 70vw;
        transform: translate(0, 0);
    }
}

/* Мобильная версия до 1024px */
@media screen and (max-width: 1024px) {
    .background {
        height: calc(60vw+var(--height-background));
    }

    .background > img {
        width: 120vw;
    }
}



/* ПК версия от 900px*/
@media screen and (max-width: 900px) {
    .background {
        height: calc(80vw+var(--height-background));
    }

    .background > img {
        width: 130vw;
    }
}
/* Мобильная версия до 768px */
@media screen and (max-width: 768px) {
    .background {
        height: calc(130vw+var(--height-background));
    }

    .background > img {
        width: 140vw;
    }
}

/* Мобильная версия до 480px */
@media screen and (max-width: 480px) {
    .background {
        height: calc(140vw+var(--height-background));
    }

    .background > img {
        width: 160vw;
    }
}

/* Мобильная версия до 320px */
@media screen and (max-width: 320px) {
    .background {
        height: calc(150vw+var(--height-background));
    }

    .background > img {
        width: 180vw;
    }
}