/* grid container page */

.principesup{
	display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
	". text1 ."
	". picture1 ."
	". text2 ."
	". picture2 ."
	". text3 .";
}

@media screen and (min-width: 1000px) {
  .principesup{
	display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 5% 50% 5% 35% 5%;
    grid-template-areas:
      ". text1 . picture1 ."
      ". text2 . picture1 ."
      ". text3 . picture1 ."
      ". text3 . picture2 .";
	margin-bottom: 2%;
  }
}

.principesmid{
	display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
	". text2 ."
	". text3 ."
	". picture3 ."
	". text4 .";
}

.principesdown{
	display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
	  ". text3 ."
	  ". picture1 .";
}

@media screen and (min-width: 1000px) {
  .principesdown{
	display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-areas:
      ". text3 picture1 .";
	margin-bottom: 2%;
  }
}

.principes1{
	display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
      ". picture1 ."
	  ". intro ."
	  ". text2 ."
	  ". text3 .";
}

@media screen and (min-width: 1000px) {
  .principes1{
	display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 5% 45% 5% 40% 5%;
    grid-template-areas:
      ". intro intro intro ."
      ". text2 . picture1 ."
      ". text3 . picture1 .";
	margin-bottom: 2%;
  }
}

.principes2{
	display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
      ". picture1 ."
	  ". text2 ."
	  ". text3 ."
	  ". subtext .";
}

@media screen and (min-width: 1000px) {
  .principes2{
	display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 5% 45% 5% 40% 5%;
    grid-template-areas:
      ". text2 . picture1 ."
      ". text3 . picture1 ."
      ". subtext subtext subtext .";
	margin-bottom: 1%;
  }
}

.principes3{
	display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
      ". picture1 ."
	  ". text2 ."
	  ". text3 .";
}

@media screen and (min-width: 1000px) {
  .principes3{
	display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 5% 65% 5% 20% 5%;
    grid-template-areas:
      ". text2 . picture1 ."
      ". text3 . picture1 .";
	margin-bottom: 1%;
  }
}

.principes4{
	display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 5% 90% 5%;
    grid-template-areas:
	  ". text2 ."
	  ". text3 .";
}


.picture1 {
	grid-area: picture1;
	justify-self: center;
	align-self: center;
}

.picture2 {
	grid-area: picture2;
	justify-self: center;
	align-self: center;
}

.picture3 {
	grid-area: picture3;
	justify-self: center;
	align-self: center;
}

.text1 {
	grid-area: text1;
	font-size: 5vh; 
}

.text2 {
	grid-area: text2;
	font-size: 3vh; 
	align-self: end;
}

.text3 {
	grid-area: text3;
	font-size: 2vh; 
}

.text4 {
	grid-area: text4;
	font-size: 2vh; 
}

.intro {
	grid-area: intro;
	font-size: 2vh; 
}

.subtext {
	grid-area: subtext;
	font-size: 2vh; 
}

img {
  object-fit: contain;
  border-color: green;
  max-height: 100%;
  max-width: 100%;
}