:root {
    --color-black: #323232;
    --color-dark-gray: #818181;
    --color-white: #ffffff;
    --container-padding: 12rem;
    --container-paddings: 0 var(--container-padding);

    --animate-transition: all .375s .175s ease-in-out;

    @media (width < 1200px) {
        --container-padding: 8rem;
    }

    @media (width < 767px) {
        --container-padding: 4rem;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 4px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

body {
    font-family: "Golos Text", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    line-height: 1.6;
    color: var(--color-black);
}

body._burger-open {
    overflow: hidden;
}

.container {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--container-paddings)
}

/* Main */
.main {
    /*min-height: calc(100vh - 200px);*/
    padding: var(--container-paddings);
}

.no-mobile {
    @media (width < 768px) {
        display: none;
    }
}

.animate-image-init {
    transition: var(--animate-transition);
    opacity: 0;
    transform: scale(0.8);
    overflow: hidden;

    & > * {
        transform: scale(1.5);
        transition: var(--animate-transition);
    }
}

.animate-image-in {
    opacity: 1;
    transform: scale(1);
    & > * {
        transform: scale(1);
    }
}

.animate-text-init {
    opacity: 0;
    transition: var(--animate-transition);
    transform: translateY(-5%);
}

.animate-text-in {
    opacity: 1;
    transform: translateY(0);
}