/*SIZE, COLOR */

:root {

    --text: 47, 47, 47;
    --text-case: 69, 69, 69;
    --label: 161, 194, 198;
    --muted: 168, 168, 168;
    --muted-light: 218, 218, 218;
    --background: 255, 255, 255;
    --hover: 247, 81, 31;
    --text-asside: 90, 90, 90;

    --pill: 248, 248, 248;
    --pill-hover: 235, 235, 235;


    --font-size-top: 1rem;

    --font-size-label: .75rem;
    --font-size-h1: 2.3rem;
    --font-size-h2: 1.5rem;
    --font-size-main: 1rem;
    --font-size-case: 1.1rem;
    --font-size-description: .8rem;


    @media (max-width: 767px) {

        --font-size-top: 1.4rem;

        --font-size-label: .9rem;
        --font-size-h1: 2.25rem;
        --font-size-h2: 1.6rem;
        --font-size-main: 1.1rem;
        --font-size-description: .9rem;
    }

    --link-transition: .6s cubic-bezier(.4, 0, .2, 1);
}

/*TYPOGRAPHY */

html {
    line-height: 1.3;
    scroll-behavior: smooth;

    --mobile-viewport-min: 320;
    --mobile-desktop-breakpoint: 768;
    --desktop-viewport-max: 1500;

    --mobile-font-size-min: 14;
    --mobile-font-size-max: 32;

    --desktop-font-size-min: 11;
    --desktop-font-size-max: 21;

    font-size: calc(var(--mobile-font-size-min) * 1px);

    @media screen and (min-width: 320px) {
        font-size: calc(var(--mobile-font-size-min) * 1px + (var(--mobile-font-size-max) - var(--mobile-font-size-min)) * ((100vw - var(--mobile-viewport-min) * 1px) / (var(--mobile-desktop-breakpoint) - var(--mobile-viewport-min))));
    }

    @media screen and (min-width: 768px) {
        font-size: calc(var(--desktop-font-size-min) * 1px + (var(--desktop-font-size-max) - var(--desktop-font-size-min)) * ((100vw - var(--mobile-desktop-breakpoint) * 1px) / (var(--desktop-viewport-max) - var(--mobile-desktop-breakpoint))));
    }

    @media screen and (min-width: 1500px) {
        font-size: calc(var(--desktop-font-size-max) * 1px);
    }

}


/*VERTICAL SPACE */

.ids__wrapper {
    width: 97%;
    margin: 0 auto;

    @media (max-width: 768px) {
        width: 93%;
    }
}

.ids__space.XS {
    height: .5rem;
}

.ids__space.S {
    height: 1rem;
}

.ids__space.M {
    height: 2rem;
}

.ids__space.L {
    height: 4rem;
}

.ids__space.XL {
    height: 8rem;
}


@media (max-width: 768px) {
    .desctop-only {
        display: none !important;
    }
}

.content-wrapper {
    margin-inline: auto;
}

.content-wrapper.S {
    width: 60%;
}

.content-wrapper.M {
    width: 74%;
}

.content-wrapper.L {
    width: 95%;
}