/* sm size */
@media only screen and (min-width: 48em) {
	.show-for-small-only{display: none;}
	.hide-for-small-only{display: block;}

	.grid {
	  display: grid;
	  grid-template-columns: repeat(12, 1fr);
	  gap: calc(var(--margin) * 2);
	}

	.column {
	  grid-column: span var(--span);
	}

	header{ padding: 15px 30px; }

	header .mobile__menu_btn {display: none; }

	header nav .main-menu_wrapper {
    height: auto;
    min-height: auto;
    max-height: none;
    /*padding: 7.5px 20px;*/
		margin-left: 0;
		position: relative;
		top:0;
		left: 0;
  }

  header nav,
  header .social-network,
	header .languages{
		margin-top: 0px;
	}

	header .social-network,
	header .languages{
		width:120px;
		max-width:120px;
		padding: 0;
	}

	header nav ul.main-menu li{
		margin-bottom: 0px;
		text-align: center;
		position: relative;
	}

	header nav ul.main-menu {
		gap: 30px; 
		margin-left: auto;
	}

	header nav ul.main-menu li:not(:last-child)::after {
		content: "|";
		position: absolute;
		right: -15px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--mainColor);
	}

	main{
		margin-top: 200px;
	}

	main.projets-wrapper{
		margin-top: calc(200px + (var(--h1Size) * 0.5));
	}

	.max-width{
		max-width: 42em;
		margin-left: auto;
		margin-right: auto;
	}

	#home_graphic_el{
		width: 50%;
	}

	.home .home_presentation{
		margin-top: calc(var(--margin) * 3);
	}

	.home .home_projects article{
		margin-bottom: 350px;
	}

	.home .home_projects article .project_text{
		position: absolute;
		right: 12.5%;
	}

	.home .home_projects article .project_link{
		position: absolute;
		left: 12.5%;
	}

	.home .home_projects article .caroussel_wrapper{
		position: relative;
		top: var(--h1Size);
	}

	.home .home_projects article:nth-child(even) h2{
		text-align: right;
		right:0;
	}

	.catch_phrase p{
		font-size: 1.5em;
	}

	.about__page h1::after{
		width: 50%;
	}

	.about_photo{
		position: relative;
		height: 75vh;
	}

	.about_photo picture{
		position: absolute;
		top: -100px;
		z-index: -1;
	}

	.page_header__wrapper h1{
		left: -10%;
	}

	.projet__page h1{
		position: absolute;
		top: calc((var(--h1Size) / 3) * -1);
		left: 20px;
	}

	.projet_presentation{
		padding-top: calc(var(--h1Size) / 1.5);
	}

	.tags_list{
		margin-top: 0;
	}

	.projets-wrapper .projets__list_cat{
		margin-bottom: 400px;		
	}

	.projets-wrapper h2{
		top: 0;
	}

	.projets__list{
		padding: 0;
	}

	.projets__list li{
		margin-bottom: 0;
	}

	.projets__list li:nth-child(odd){
		transform: translate(25%, 100px);
	}

	.projets__list li:nth-child(even){
		transform: translate(8%, 300px);
	}

}

/* md size */
@media only screen and (min-width: 64em) {
	:root{
		--bodyMargin: 70px;
		--h1Size: 90px;
		--h2Size: 45px;
	}

	header .site__logo figure{
		width: 90px;
	}

	#home_graphic_el{
		left: 50%;
	}

	.home .subtitle {
		position: absolute;
		top: -50px;
		left: 33%;
	}
	.home .home_projects h2{
		position: absolute;
		z-index: 2;
	}

	.about__page h1::after{
		width: 60%;
		height: calc(var(--h1Size) * 1.5);
	}
}

/* lg size */
@media only screen and (min-width: 75em) {

}

/* xl size */
@media only screen and (min-width: 90em) {
	:root{
		--textSize: 26px;
		--h1Size: 108px;
		--h2Size: 50px;
	}
	body{
		line-height: 1.4;
	}

	.max-width-xl{
		max-width: 52em;
		margin-left: auto;
		margin-right: auto;
	}

	.about__page h1::after{
		width: 70%;
	}
}