@font-face {

	font-family: "new-hero";

	src: url("../fonts/maille/new-hero_200_normal.woff") format("woff"),url("../fonts/maille/new-hero_200_normal.woff2") format("woff2"),url("../fonts/maille/new-hero_200_normal.otf") format("opentype");

	font-display: auto;

	font-style: normal;

	font-weight: 200;

	font-stretch: normal;

}

@font-face {

	font-family: "new-hero";

	src: url("../fonts/maille/new-hero_800_normal.woff") format("woff"),url("../fonts/maille/new-hero_800_normal.woff2") format("woff2"),url("../fonts/maille/new-hero_800_normal.otf") format("opentype");

	font-display: auto;

	font-style: normal;

	font-weight: 800;

	font-stretch: normal;

}

html,body {

  padding: 0;

  height: 100%;

  width: 100%;

  font-size: 16px;

  line-height: 1.5;

  overflow-x: hidden;

  margin: 0;

  background: linear-gradient(180deg, #F9F9F9 60.74%, #FFF 100%);

}

body {

  max-width: 1920px;

  margin: 0 auto;

}

@media all and (min-width: 768px){

  html {

    font-size: 18px;

  }

}

img {

  max-width: 100%;

  height: auto;

  display: block;

}

.project-content > div{

  position: relative;

}

.project-content__text {

  padding: 3rem 1rem;

}

.project-content__text-wrapper {

  margin: 0 auto;

  max-width: 720px;

}

.project-content__text h2{

  font-family: Albert Sans;

  font-size: 35px;

  font-style: normal;

  font-weight: 800;

  line-height: 150%;

  color: #292E3D;

  margin: 0 0 0.5rem;

}

.project-content__text p ,

.project-content__text li {

  font-family: Fraunces;

  font-size: 18px;

  font-style: normal;

  font-weight: 400;

  line-height: 150%;

  letter-spacing: 0.18px;

  color: #292E3D;

}

.project-content__icon-wrapper {

  display: grid;

  grid-template-columns: 1fr;

  gap: 32px;

  max-width: 1024px;

  margin: auto;

  padding: 0 1rem;

  justify-items: center;

  grid-auto-rows: 318px;

}

@media all and (min-width: 768px){

  .project-content__icon-wrapper {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media all and (min-width: 1000px){

  .project-content__icon-wrapper {

    grid-template-columns: repeat(3, 1fr);

  }

}

.project-content__icon {

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 25px;

  background-color: #ffff;

  max-width: 320px;

  max-height: 318px;

  width: 100%;

  height: 100%;

}

.project-content__icon--blue {

  background-color: #0F50BD;

}









.project-content__color-wrapper {

  display: flex;

  flex-direction: column;

  gap: 16px;

  padding: 0 1rem;

}

.project-content__color {

  border-radius: 25px;

  color: #ffff;

  width: 100%;

  font-family: "new-hero", sans-serif;

  font-weight: 200;

  font-size: 20px;

}

.project-content__color-content {

  padding: 24px;

}

.project-content__color--new-hero { 

  grid-area: project-content__color--new-hero;

  background-color: #1A181B;

}

.project-content__color--new-hero .font-large { 

  font-size: 48px;

  margin-top: 32px;

  margin-bottom: 32px;  

}

.project-content__color--new-hero .font-large span { 

  font-weight: 800;

}

.project-content__color--new-hero p:last-child { 

  font-size: 18px;

}

.project-content__color--font { 

  grid-area: project-content__color--font; 

  background-color: #0F50BD;

}

.project-content__color--font .font-large { 

  font-size: 100px;

  font-weight: 800;

  margin: 0;

  line-height: normal;

  margin-top: 20px;

  margin-bottom: 16px;

}

.project-content__color--font .font-wrapper {

  display: flex;

  flex-direction: column;

  gap: 24px;

}

.project-content__color--font .font-wrapper > p {

  margin: 0;

}

.project-content__color--font .font-wrapper > p:first-child {

  font-size: 18px;

}

.project-content__color--font .font-wrapper > p:last-child {

  font-size: 18px;

  line-break: anywhere;

}

.project-content__color--blue { 

  grid-area: project-content__color--blue; 

  background-color: #0F50BD;

}

.project-content__color--black { 

  grid-area: project-content__color--black; 

  background-color: #1A181B;

}

.project-content__color--red { 

  grid-area: project-content__color--red; 

  background-color: #901B09;

}



@media all and (min-width: 650px) {

  .project-content__color-wrapper {

    display: grid;

    grid-template-columns: repeat(6,1fr);

    gap: 0px 0px;

    grid-auto-flow: row;

    grid-template-areas:

      "project-content__color--new-hero project-content__color--new-hero project-content__color--new-hero project-content__color--font project-content__color--font project-content__color--font"

      "project-content__color--blue project-content__color--blue project-content__color--black project-content__color--black project-content__color--red project-content__color--red"

      ". . . . . .";

    gap: 16px;

    max-width: 1398px;

    margin: auto;

    padding: 0 1rem;

    justify-items: center;

  }

  .project-content__color {

    min-height: 200px;

  }

  .project-content__color-content {

    padding: 24px;

  }

  .project-content__color--font .font-wrapper > p:last-child {

    font-size: 24px;

  }

  .project-content__color--font .font-large { 

    margin-top: 60px;

  }

}

@media all and (min-width: 1200px) {

  .project-content__color-wrapper {

    gap: 32px;

  }

  .project-content__color {

    min-height: 350px;

  }

  .project-content__color-content {

    padding: 40px;

  }

  .project-content__color--new-hero { 

    height: 495px;

  }

  .project-content__color--new-hero .font-large { 

    font-size: 96px;

    margin-top: 65px;

    margin-bottom: 40px;  

  }

  .project-content__color--new-hero p:last-child { 

    font-size: 24px;

  }

  .project-content__color--font .font-large { 

    font-size: 200px;

  }

  .project-content__color--font .font-wrapper {

    flex-direction: row;

    gap: 40px;

  }

  .project-content__color--font .font-wrapper > p:first-child {

    max-width: 119px;

  }

}







@media all and (min-width: 750px){

  .project-content__text {

    padding: 6rem 2rem;

  }

  .project-content__text h2{

    font-size: 52px;

  }



}

@media all and (min-width: 1000px){

  .project-content__text {

    padding: 8.25rem 2rem;

  }

}





@media all and (min-width: 700px){

  .project-content__design-system {

    display: flex;

    align-items: center;

    background-color: #F1F2F3;

  }

  .project-content__design-system img:first-child {

    max-width: 858px;

    width: 46%;

  }

  .project-content__design-system img:last-child {

    max-width: 1062px;

    width: 57%;

    background-color: white;

  }

}



.project-content__picture--gap {

  margin-bottom: 50px;

}

@media all and (min-width: 1000px){

  .project-content__picture--gap {

    margin-bottom: 200px;

  }

}

.project-content__visual {

  padding: 3rem 1rem;

  background-color: #FFF2F1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2rem;

}

.project-content__visual img {

  max-width: 250px;

}

@media all and (min-width: 700px){

  .project-content__visual {

    padding: 8rem 2rem;

    flex-direction: row;

    gap: 4rem;

  }

  .project-content__visual img {

    max-width: initial;

  }

}

@media all and (min-width: 1100px){

  .project-content__visual {

    padding: 13rem 2rem;

  }

}



.project-content__column {

  padding: 3rem 1rem;

  margin: 0 auto;

  display: flex;

  flex: 1;

  flex-direction: column;

  text-align: center;

  align-items: center;

  justify-content: center;

  gap: 2rem;

}

.project-content__column-item {

  max-width: 450px;

}

.project-content__column-item p{

  color: #292E3D;

}

.project-content__column-item p:not(.number){

  font-family: Fraunces;

  font-size: 18px;

  font-style: normal;

  font-weight: 400;

  line-height: 150%;

  letter-spacing: 0.18px;

}

@media all and (min-width: 750px){

  .project-content__column {

    padding: 6rem 2rem;

    flex-direction: row;

    align-items: flex-start;

  }

  .project-content__column-item {

    width: 33%;

  }

}

@media all and (min-width: 1000px){

  .project-content__column {

    padding: 8.25rem 2rem;

  }

}



/**

 * Number

 */



.number {

  font-size: 54px;

  font-style: normal;

  font-weight: 800;

  line-height: 150%;

  margin: 0;

  font-family: Albert Sans;

}