@font-face {
  font-family: "Inter";
  font-weight: 100 900; 
  font-style: normal;
  src: url("../assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}

@font-face {
  font-family: "Montserrat";
  font-weight: 100 900;
  font-style: normal;
  src: url("../assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-weight: 300 800;
  font-style: normal;
  src: url("../assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-weight: 300 800;
  font-style: italic;
  src: url("../assets/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
}



:root{

  /*COLORS*/

  --deep-dark:	#000;
  --white:	#F3F4F6;
  --brand-green: #22CCB2;
  --grey:	#BDC1CA;
  --other-dark:	#1E2128;

  /* --white: #F9FAFB; */
  /* --grey: #89979F; */

  /* --black text button: #19191F; */


  /*SIZE*/

  --size-mobile-max: 20.4375rem;
  
  --size-500: 31.25rem;
  --size-128px: 8rem;
  --size-96px: 6rem;
  --size-80px: 5rem;
  --size-64px: 4rem;  
  --size-48px: 3rem;  
  --size-40px: 2.5rem;  
  --size-32px: 2.0rem; 
  --size-24px: 1.5rem;
  --size-20px: 1.25rem;
  --size-16px: 1.0rem;
  --size-12px: 0.75rem;
  --size-08px: 0.5rem;
  --size-04px: 0.25rem;


  --size0to16: clamp(0rem, 3.9474rem + -16.8421vw, 1rem);
  --size48to80: clamp(3rem, 0.7143rem + 4.7619vw, 5rem);
  --size-80to156: clamp(5rem, -0.4286rem + 11.3095vw, 9.75rem);
  --size128to176: clamp(8rem, 4.5714rem + 7.1429vw, 11rem);
	--size-500-768: clamp(31.25rem, 12.1071rem + 39.881vw, 48rem);
  --size-500-820: clamp(31.25rem, 8.3929rem + 47.619vw, 51.25rem);
  --size500to1024: clamp(31.25rem, 7.8571rem + 62.381vw, 64rem);
  --size700to1024: clamp(43.75rem, 20.6071rem + 48.2143vw, 64rem);
  --size700to1190: clamp(43.75rem, 8.75rem + 72.9167vw, 74.375rem);


  /*FONT*/

}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0
}


body{
  min-width: 17.5rem;
  min-height: 100vh;
  min-height: 100dvh; /* mobile size ios */
  background: var(--deep-dark);
}



/**TEXT**/

.inter-regular{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.inter-medium{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.montserrat-regular{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.montserrat-semibold{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.montserrat-bold{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.montserrat-black{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.open-sans-regular{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.open-sans-semi-bold{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.open-sans-bold{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.open-sans-bold-italic{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}


.text-preset-48{
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: -0.094rem;
  -webkit-font-smoothing: antialiased; /* apple */
  &.isFluid-48to60{
    font-size: clamp(3rem, 2.1429rem + 1.7857vw, 3.75rem);
  }
}

.text-preset-36{
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.1125rem;
  word-spacing: -0.15rem;
  -webkit-font-smoothing: antialiased; /* apple */
  @media screen and (min-width: 48rem){
    &.isFluid-36to72{
      font-size: clamp(2.25rem, -0.3214rem + 5.3571vw, 4.5rem);  
    }    
  }
}

.text-preset-30{
  font-size: 1.875rem;
  line-height: 1.5;
  letter-spacing: -0.045rem;
  /* -webkit-font-smoothing: antialiased; apple */
  @media screen and (min-width: 48rem){
    &.isFluid-30to60{
      font-size: clamp(1.875rem, -0.2679rem + 4.4643vw, 3.75rem);  
    }    
  }
}

.text-preset-24{
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: -0.05rem;
  @media screen and (min-width: 48rem){
    &.isFluid-24to48{
      font-size: clamp(1.5rem, -0.2143rem + 3.5714vw, 3rem);
    }
  }
}

.text-preset-20{
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0;
  @media screen and (min-width: 48rem){
    &.is-fluid-20to24{
      font-size: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
    }    
  }
}

.text-preset-18{
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.text-preset-16{
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  word-spacing: 0.0625rem;
  @media screen and (min-width: 48rem){
    &.isFluid-16to18{
      font-size: clamp(1rem, 0.8571rem + 0.2976vw, 1.125rem);  
    }
    &.isFluid-16to20{
      font-size: clamp(1rem, 0.7143rem + 0.5952vw, 1.25rem);  
    }    
  }
}

.text-preset-14{
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0;
  /* -webkit-font-smoothing: subpixel-antialiased; apple */
  @media screen and (min-width: 48rem){
    &.isFluid-14to16{
      font-size: clamp(0.875rem, 0.7321rem + 0.2976vw, 1rem);
    }   
    &.isFluid-14to18{
      font-size: clamp(0.875rem, 0.5893rem + 0.5952vw, 1.125rem);
    }    
    &.isFluid-14to20{
      font-size: clamp(0.875rem, 0.4464rem + 0.8929vw, 1.25rem);
    } 
  }
}

.text-preset-12{
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0;
  /* -webkit-font-smoothing: subpixel-antialiased; apple */
  @media screen and (min-width: 48rem){
    &.isFluid-12to14{
      font-size: clamp(0.75rem, 0.6071rem + 0.2976vw, 0.875rem);
    }    
  }
}

.text-preset-10{
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.1rem;
  /* -webkit-font-smoothing: subpixel-antialiased; apple */
}


.text-preset-10{
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.1rem;
  @media screen and (min-width: 48rem){
    &.is-fluid-10to14{
      font-size: clamp(0.625rem, 0.3393rem + 0.5952vw, 0.875rem);
    }    
  }

}


.title{
  color: var(--white);
}

.text{
  color: var(--grey);
}

.highlight{
  color: var(--brand-green);
}


/****/

img{
  display: block;
  object-fit: cover; 
}

button{
  display: block;
  background: transparent;
  border-style: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  &:hover{
    cursor: pointer;
  }
}

.list{
  display: flex;
  flex-direction: row;
  list-style: none;
}

input,
select{
  background: none;
  border: none;
} 

a{
  display: inline-block;
  text-decoration: none;
  color: inherit;
  &:hover{
    cursor: pointer;
  }
}

.sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0); 
	white-space: nowrap;   
	border: 0;
}

.is-disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.isHidden{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}




/*HEADER*/

.container-header {
  display: flex;
  justify-content: space-between;
  /* align-content: center; */
  align-items: center;

  max-width: var(--size-mobile-max);
  margin: 0 auto;
  padding: var(--size-16px) var(--size0to16);
	.container-logo a{
    display: flex;
    align-items: center;
		.logo-header {
      width: 1.5rem;
      height: auto;
		}
		.text {
      margin-left: var(--size-04px);
			color: var(--brand-green);
		}
	}
	.container-button {
    width: 1rem;
		height: 1rem;
	}
	.nav-menu {
    width: 80%;
    max-width: 250px;
    height: 100vh;
    padding: var(--size-32px) 0 var(--size-32px) var(--size-24px);
    background: hsl(222, 14%, 14%);
    color: var(--white);
    position: fixed;
      top: 0; left: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s;
    &.isOpen{
      transform: translateX(0%);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
		.list-menu {
      flex-direction: column;
			.li-menu {
        margin-bottom: var(--size-20px);
			}
			.btn-cta {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 8rem;
        height: var(--size-48px);
        background: var(--brand-green);
        color: #000;
        border-radius: var(--size-04px);
			}
      .btn-lang {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4rem;
        height: var(--size-32px);
        background: var(--brand-green);
        color: #000;
        border-radius: var(--size-16px);
			}
		}
	}

  @media screen and (min-width: 37.5rem) {
    max-width: 100%;
    width: var(--size-500);
  }

  @media screen and (min-width: 48rem) {
    max-width: var(--size700to1190);
    width: 100%;
    padding: var(--size-16px) 0;
    .container-logo a{
      align-items: center;
      .logo-header {  
        width: var(--size-32px);
        height: auto;
      }
    }
    .container-button {
      display: none;
    }
    .nav-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0%);
      transition: none;
      width: 24rem;
      max-width: none;
      height: auto;
      padding: 0;
      background: transparent;
      color: var(--grey);
      position: static;
      .list-menu {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .li-menu {
          margin: 0;
        }
        .btn-cta {
          height: var(--size-40px);
        }
      }
    }
  }
}


/*MAIN*/

.home-page .container-main {
  max-width: var(--size-mobile-max);
  margin: var(--size-48px) auto;
  padding: 0 var(--size0to16);
  @media screen and (min-width: 37.5rem) {
    max-width: 100%;
  }
  @media screen and (min-width: 48rem) {
    margin: clamp(3rem, 0.7143rem + 4.7619vw, 5rem) auto;
  }
}


.hero {
  .container-line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .line {
      width: var(--size-32px);
      height: 0.0625rem;
      background: var(--brand-green);
      margin-right: var(--size-16px);
    }
    .text-line{
      text-transform: uppercase;
      color: var(--brand-green);
    }
  }
  .main-title {
    line-height: 1.1;
    margin-top: var(--size-32px);
    padding-right: var(--size-08px);
    .title{
      display: inline-block;
    }
    .highlight{
      margin-top: -0.5rem;
      display: inline-block;
    }
  }
  .text {
    margin-top: var(--size-24px);
    padding-right: var(--size-12px);
  }
  .container-button {
    margin-top: var(--size-40px);
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: var(--size-48px);
      background: var(--brand-green);
      border-radius: var(--size-04px);
      &:nth-of-type(2) {
        margin-top: var(--size-12px);
        background: transparent;
        color: var(--white);
        border: 0.0625rem solid var(--white);
      }
    }
  }
  .hero-image-wrapper {
    margin: var(--size-48px) 0;
    .hero-image {
        max-width: 100%;
    }
  }

  @media screen and (min-width: 37.5rem) {
    max-width: var(--size-500);
    margin: 0 auto;
    .container-desktop{

    }
    .container-button {
      width: 21.875rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn {
        width: 10rem;
        height: 2.75rem;
        &:nth-of-type(2) {
          width: 11rem;
          margin-top: 0;
        }
      }
    }
  }

  @media screen and (min-width: 48rem) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--size700to1024);
    .container-desktop{
      width: 50%;
    }
    .text {
      margin-top: var(--size-12px);
    }
    .hero-image-wrapper {
      width: 50%;
    }
  }

}


.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.25rem;
  height: 1.375rem;
  margin: 0 auto;
  color: var(--brand-green);
  border: 0.0625rem solid hsla(171, 71%, 47%, 0.3);
  border-radius: var(--size-12px);
}


.features {
  margin-top: var(--size-128px);
  text-align: center;
  .title {
    margin-top: var(--size-16px);
  }
  .text{
    margin: var(--size-20px) 0;
  }
  .features-grid {
    margin: var(--size-48px) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: 2rem;
    .feature-card:nth-child(even)  {
      justify-self: end;
    }
  }

  @media screen and (min-width: 37.5rem) {
    margin: var(--size-128px) auto 0;
    .container-desktop{
      max-width: var(--size500to1024);
      margin: 0 auto;
    }
    .text{
      max-width: 47.125rem;
      margin: var(--size-20px) auto 0;
    }
    .features-grid {
      width: clamp(25rem, 16.4286rem + 22.8571vw, 30rem);
      margin: var(--size-48px) auto 0;
    }
  }

  @media screen and (min-width: 59.375rem) {
    margin-top: var(--size128to176);
    .features-grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      max-width: 64rem;
    }
  }

}


.feature-card {
  text-align: center;
  max-width: 10rem;
  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    background: hsla(171, 71%, 47%, 0.1);
    border: 0.0625rem solid hsla(171, 71%, 47%, 0.3);
    border-radius: 50%;
    img {
      width: 1.35rem;
      height: 1.35rem;
    }
  }
  .title-card {
    color: var(--white);
    margin: var(--size-12px) 0 0;
  }
  .text-card {
    width: 18ch;
    color: var(--grey);
    margin: var(--size-08px) auto 0;
  }

  @media screen and (min-width: 48rem) {
    max-width: 14.5rem;
    .text-card {
      width: 100%;
    }
  }

}


.concept {
  margin: var(--size-96px) 0 0;
  .badge {
    margin-bottom: 3.5rem;
  }
  .container-text{
    margin-top: var(--size-48px);
  }
  .title {
    margin-bottom: var(--size-16px);
  }
  .line {
    width: 3rem;
    height: 0.25rem;
    background: var(--brand-green);
    border-radius: var(--size-04px);
  }
  .text {
    margin: var(--size-20px) 0 0;
  }
  .concept-image-wrapper {
    margin-top: var(--size-64px);
    position: relative;
    .concept-image {
      max-width: 100%;
      opacity: 0.8;
    }
    .bubble {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 12.125rem;
      height: 1.875rem;
      padding: 0 var(--size-08px);
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(0.2rem) brightness(110%);
      -webkit-backdrop-filter: blur(0.2rem) brightness(110%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 0.4rem 2rem 0 rgba(255, 255, 255, 0.3);
      border-radius: var(--size-08px);
      position: absolute;
        bottom: -1rem; right: -0.2rem;
      z-index: 1;
      .concept-logo {
        width: 1rem;
        height: 1rem;
      }
      .bubble-text {
        text-transform: uppercase;
        color: var(--white);
      }
    }
  }

  @media screen and (min-width: 37.5rem) {
    width: var(--size-500);
    margin: var(--size-96px) auto;
    .title {
      line-height: 1.15;
      margin-bottom: var(--size-20px);
    }
    .line {
      width: 5rem;
      height: 0.25rem;
      background: var(--brand-green);
    }
  }

  @media screen and (min-width: 48rem) {
    width: var(--size700to1024);
    margin-top: clamp(6rem, 1.7143rem + 8.9286vw, 9.75rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, min-content);
    align-items: center;
    column-gap: 1.25rem;
    .badge {
      grid-column: 1 / -1;
      grid-row: 1;
    }
    .container-text{
      grid-column: 2;
      grid-row: 2;
      max-width: 30rem;
      margin: 0 0 0 auto;
    }
    .concept-image-wrapper {
      grid-column: 1;
      grid-row: 2;
      max-width: 30rem;
      margin: 0;
      .concept-image{
        border-radius: var(--size-16px);
      }
    }
  }

}


.portfolio {
  margin-top: var(--size-80px);
  .title {
    text-align: center;
    margin-top: var(--size-24px);
  }
  .projects-list {
    margin-top: var(--size-32px);
  }
  .project-card {
    max-width: var(--size-mobile-max);
    background: hsla(222, 14%, 14%, 0.5);
    border-radius: var(--size-08px);
    margin-bottom: var(--size-24px);
    .container-image {
      width: 100%;
      height: 12rem;
      position: relative;
      box-shadow: inset 1rem -2rem 2rem hsla(0, 0%, 0%, 1);
      .project-image {
        width: 100%;
        height: 100%;
        border-top-left-radius: var(--size-08px);
        border-top-right-radius: var(--size-08px);
        opacity: 0.8;
      }
      .project-title {
        filter: brightness(120%);
        position: absolute;
          bottom: var(--size-16px); left: var(--size-12px);
        .highlight {
          display: block;
          margin-bottom: var(--size-04px);
          text-transform: uppercase;
        }
        .project-name {
          color: var(--white);
        }
      }
    }
    .project-content {
      color: var(--white);
      padding: var(--size-16px) var(--size-12px) var(--size-24px);
      .list-techno {
        flex-wrap: wrap;
        .li-techno {
          background: #262A33;
          border-radius: var(--size-08px);
          border: 0.0625rem solid #000;
          margin-right: var(--size-08px);
          padding: var(--size-04px) var(--size-08px);
        }
      }
      .project-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--size-24px);
      }
    }
  }
  .btn-portfolio {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--size-08px);
    background: transparent;
    color: var(--white);
    border-radius: var(--size-04px);
    border: 0.0625rem solid var(--white);
  }

  @media screen and (min-width: 37.5rem) {
    max-width: var(--size-500);
    margin: var(--size-80px) auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, min-content);
    align-items: center;
    .badge{
      grid-column: 1 / -1;
      grid-row: 1;
      margin-bottom: var(--size-24px);
    }
    .title {
      grid-column: 1;
      grid-row: 2;
      text-align: left;
      margin-top: 0;
    }
    .projects-list {
      grid-column: 1 / -1;
      grid-row: 3;
    }
    .project-card {
      max-width: 31rem;
      .container-image {
        width: 100%;
        height: 17.4375rem;
      }
      .project-content {
        padding: var(--size-24px) var(--size-24px) var(--size-20px);
        .project-link {
          margin-top: var(--size-16px);
        }
      }
    }
    .btn-portfolio {
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
      width: 12.25rem;
      height: 2.5rem;
    }
  }

  @media screen and (min-width: 48rem) {
    max-width: var(--size700to1024);
    margin-top: var(--size-80to156);
    .projects-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    .project-card {
      width: 48%;
      .container-image {
        width: 100%;
        height: clamp(13rem, 7.8571rem + 10.7143vw, 17.5rem);
      }
    }
  }

}

.icon-large {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  background: hsla(171, 71%, 47%, 0.1);
  border: 0.0625rem solid hsla(171, 71%, 47%, 0.3);
  border-radius: 50%;
  img {
    width: 2rem;
    height: 2rem;
  }
}

.final-cta {
  margin-top: var(--size-80px);
  padding: var(--size-48px) 0 var(--size-32px);
  border-radius: var(--size-08px);
  text-align: center;
  background: radial-gradient(circle at 0 0, hsla(171, 71%, 47%, 0.2), hsla(222, 14%, 14%, 0.3) 50%);
  .title {
    margin-top: var(--size-24px);
  }
  .text {
    margin-top: var(--size-16px);
    padding: 0 var(--size-16px);
  }
  .btn-cta {
    max-width: 17.5rem;
    height: 3.5rem;
    margin: var(--size-24px) auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--brand-green);
    border-radius: var(--size-32px);
    box-shadow: 0 0.5rem 2rem hsla(171, 71%, 47%, 0.5);
  }

  @media screen and (min-width: 37.5rem) {
    max-width: var(--size-500);
    margin: var(--size-80px) auto 0;
  }

  @media screen and (min-width: 48rem) {
    max-width: var(--size700to1024);
    padding: var(--size-96px) 0;
    margin-top: var(--size-80to156);
    .title {
      line-height: 1.25;
    }
    .text {
      max-width: 41.625rem;
      margin: var(--size-16px) auto 0;
    }
    .btn-cta {
      margin-top: var(--size-48px);
    }

  }
}



.site-footer {
  padding: var(--size-48px) 0 0;
  border-top: 0.0625rem solid hsla(220, 14%, 96%, 0.1);
  text-align: center;
  .container-size{
    max-width: var(--size-mobile-max);
    margin: 0 auto;    
  }
  .line{
    width: 100%;
    height: 0.0625rem;
    background: hsla(220, 14%, 96%, 0.1);
    border: none;
  }
  .container-logo {
    .logo {
      width: 3rem;
      height: auto;
      margin: 0 auto;
    }
    .title {
      color: var(--brand-green);
      margin-top: var(--size-08px);
    }
    .text {
      margin-top: var(--size-32px);
      padding: 0 var(--size-24px);
    }
  }
  .container-list {
    margin-top: var(--size-48px);
    .title {
      text-transform: uppercase;
      margin-bottom: var(--size-12px);
    }
    .list-pages {
      flex-direction: column;
      color: var(--grey);
      .li-page {
        margin: var(--size-04px) 0;
      }
    }
    &:nth-of-type(3) {
      margin-bottom: var(--size-32px);
    }
  }
  .footer-legal {
    margin: var(--size-24px) 0;
    color: var(--grey);
    .legal-links {
      width: 12.5rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: var(--size-16px);
    }
  }

  @media screen and (min-width: 37.5rem) {
    .container-size{
      max-width: var(--size-500);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      justify-content: space-between;
    }
    .container-logo {
      grid-column: 1 / -1;
      grid-row: 1;
      .text {
        width: 36ch;
        margin: var(--size-32px) auto;
      }
    }
    .container-list {
      grid-column: 1;
      grid-row: 2;
      margin-top: var(--size-24px);
      &:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
      }
    }
  }

  @media screen and (min-width: 48rem) {
    .container-size{
      max-width: var(--size700to1190);
      display: grid;
      grid-template-columns: 1fr min-content min-content;
      grid-template-rows: 1fr;
      text-align: left;
      padding-bottom: var(--size-48px);
    }
    .container-logo {
      grid-column: 1;
      grid-row: 1;
      display: grid;
      grid-template-columns: 3rem max-content;
      grid-template-rows: repeat(2, min-content);
      align-items: center;
      .logo {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
      }
      .title {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
      }
      .text {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: var(--size-16px) 0 0;
        padding: 0;
      }
    }
    .container-list {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      &:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
        margin: 0 0 0 var(--size-48px);
        white-space: nowrap;
      }
    }
    .footer-legal {
      max-width: var(--size700to1190);
      margin: var(--size-24px) auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .legal-links {
        margin: 0;
      }
    }
  }
}



/*MENTION*/

.mentions-page .container-main {

  max-width: var(--size-mobile-max);
  margin: var(--size-48px) auto;
  @media screen and (min-width: 37.5rem){
    max-width: var(--size-500);
  }
  @media screen and (min-width: 48rem){
    max-width: var(--size-500-768);
    margin: var(--size-48px) auto var(--size-128px);

  }

  .legal-section {
    margin-top: var(--size-16px);
  }

}