:root{

    /* STRUCTURAL */
    --max-width: calc(100vw - 2 * var(--section-padding-left));
    --max-width-small: calc(100vw - 2 * var(--section-padding-left-small));
    --gap: 25px;
    --gallery-gap: 10px;
    --padding: 50px;
    --main-height: 75vh;

    /* STYLE */
    --border-radius-small: 3px;
    --border-radius-medium: 27px;
    --border-radius-large: 40px;
    /* SECTIONS */
    --section-gap: 5vw;
    --section-padding-top: 12vw;
    --section-padding-bottom: 12vw;
    --section-padding-left: 12vw;
    --section-padding-right: var(--section-padding-left);
    --section-max-width: var(--max-width);

	/* SpaceGrotesk */
    --font-headings: 'Poppins', sans-serif;
    --font-text: 'Poppins', sans-serif;
	--h1-size: clamp(2.25rem, 1.7908rem + 1.2245vw, 3.75rem); /* 36 - 60 op vw 600px - 2560px */
	--h2-size: clamp(1.875rem, 1.6837rem + 0.5102vw, 2.5rem);  /* 30 - 40 op vw 600px - 2560px */
	--h3-size: clamp(1.5625rem, 1.4668rem + 0.4305vw, 1.875rem); /* 25 - 30 op vw 600px - 2560px */
	--h4-size: clamp(1.125rem, 1.0867rem + 0.102vw, 1.25rem); /* 18 - 20 op vw 600px - 2560px */
	--h5-size: clamp(1.125rem, 1.0867rem + 0.102vw, 1.25rem); /* 18 - 20 op vw 600px - 2560px */
	--h6-size: clamp(1.125rem, 1.0867rem + 0.102vw, 1.25rem); /* 18 - 20 op vw 600px - 2560px */
	--p-size: clamp(0.9375rem, 0.8801rem + 0.1531vw, 1.125rem); /* 15 - 18 op vw 600px - 2560px */
}

/* backup
	--h1-size: clamp(1.625rem, 0.5918rem + 2.7551vw, 5rem); 26 - 80 op vw 600px - 2560px
	--h2-size: clamp(1.375rem, 0.2653rem + 2.9592vw, 5rem); 26 - 45 op vw 600px - 2560px 
	--h3-size: clamp(1.25rem, 1.0969rem + 0.4082vw, 1.75rem); 20 - 28 op vw 600px - 2560px 
*/



/* ---------------- */
/* MEDIA QUERIES 	*/
/* ---------------- */
@media screen and (min-width: 1801px) {
    :root{
		--section-padding-top: 12vw;
		--section-padding-bottom: 12vw;
		--section-padding-left: 15vw;	
		--padding: 60px;
		--gap: 60px;
	}
}
@media screen and (max-width: 1800px) {
	
}
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 600px) {
    :root{

        /* DESKTOP */
        --section-gap: 25px;
        --section-padding-top: 100px;
        --section-padding-bottom: 100px;
        --section-padding-left: 20px;
        --section-padding-right: 20px;
        --section-max-width: 100%;

    }
}
