@media (min-width: 1920px) {
    :root {
        --padding: calc((100vw - (1920px - 288px * 2)) / 2);
    }
}

@media (min-width: 1081px) and (max-width: 1920px) {
    :root {
        /* --padding: calc( 5rem + ((100vw - 1080px) / 840 * 238) ); */
        --padding: calc( 5rem + ((100vw - 1080px) * (1 / 840 * 238)) );
        /* --padding: 10rem; */
    }
}

@media (max-width: 1380px) and (min-width: 1080px) {
    :root {
        --gap: calc(2rem + (100vw - 1080px) * (1 / 300 * 20));
    }
}

@media (max-width: 1280px) {
    :root {
        --font-xlarge: 7rem;
        --font-large: 7rem;
    }
}

@media (max-width: 1080px) {
    :root {
        --padding: 5rem;
        --gap: 2rem;
        --font-xlarge: var(--font-headline);
        --font-large: var(--font-headline);
    }
}

@media (max-width: 1080px) {
    :root {
        --font-headline: 4rem;
        --xLargeTopPadding: var(--topPadding);
        --largeTopPadding: var(--topPadding);
        --topPadding: 10rem;
        --smallTopPadding: calc(var(--topPadding) / 2);

        --font-default: 2rem;
    }

    footer nav a {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    :root {
        --font-headline: 3.5rem;
        --padding: 3rem;
        --font-default: 1.8rem;
    }

    nav.main-menu {
        width: 100%;
    }

    nav.main-menu ul {
        width: 100%;
        justify-content: center;
        gap: 10vw
    }

    footer nav ul {
        --gap: 2rem
    }

    footer {
        padding-bottom: 5em;
    }

    .scroll_link {
        font-size: 1em;
    }
}

@media (max-width: 450px) {
    :root {
        --font-headline: 2.8rem;
        --topPadding: 3rem;
        --font-default: 1.4rem;
        --padding: 2rem;
        --gap: 1.6rem;
    }

    footer nav ul {
        max-width: 25rem;
    }
}