:root {
    /* TEXTS */
    --title-xl: clamp(36px, calc(64vw / 19.2), 64px);
    --title-l: clamp(30px, calc(48vw / 19.2), 48px);
    --title-nb: clamp(26px, calc(36vw / 19.2), 36px);
    --title-m: clamp(16px, calc(24vw / 19.2), 24px);
    --title-btn: clamp(15px, calc(20vw / 19.2), 20px);
    --base: clamp(14px, calc(20vw / 19.2), 20px);

    /* FONTS */
    --font-main: "Arboria", sans-serif;

    /* COLORS */
    --color-primary:#2C97AA ;
    --color-secondary: #F49600;
    --color-light: #ffffff;
    --color-dark: #2d2d2d;
    --color-middle: #A6A6A6;

    /* MARGINS */
    --gap-s: 24px;
    --gap-m: clamp(1rem, calc(50vw / 19.2), 50px);
    --gap-l: clamp(2rem, calc(80vw / 19.2), 80px);
    --rad-s: 24px;
    --radius: 30px;
    --gap-xl: clamp(1rem, calc(125vw / 19.2), 125px);

    --margin: calc(var(--gap-s) + 10px) clamp(1rem, calc(185vw / 19.2), 185px);
    
    /* TRANSITION */
    --transition-base: cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
    --shadow: 0px 3px 20px #0000001A;
}