@import url("https://fonts.googleapis.com/css2?family=Comfortaa&family=Vollkorn:wght@800&display=swap");

/* Шрифт */
p {
  font-family: "Comfortaa", cursive;
}
/* ---------------- */

/* Отступы */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* ---------------- */

/* Общая настройка отображения блоков */
#main .section {
  height: 100%;
}

.p1,
.p3,
.p5 {
  height: 100%;
  display: grid;
  grid-template-columns: 75% auto;
  grid-template-rows: auto 80%;
}

.p2,
.p4,
.p6 {
  height: 100%;
  display: grid;
  grid-template-columns: auto 75%;
  grid-template-rows: auto 90%;
}

.header {
  grid-area: 1 / 1 / 2 / 3;
  font-family: "Vollkorn", serif;
  margin: 0;
  padding-top: 30px;
  text-align: center;
}

.text p {
  text-indent: 3vw;
  font-size: 0.8vw;
  margin: 2vh;
}

.image img {
  height: auto;
  width: auto;
  max-width: 22vw;
}

.p1 .text,
.p3 .text,
.p5 .text {
  grid-area: 2 / 1 / 3 / 2;
  text-align: left;
  margin-left: 5%;
}

.p1 .image,
.p3 .image,
.p5 .image {
  grid-area: 2 / 2 / 3 / 3;
  align-self: right;
  margin-right: 5%;
}

.p2 .text,
.p4 .text,
.p6 .text {
  grid-area: 2 / 2 / 3 / 3;
  text-align: right;
  margin-right: 5%;
}

.p2 .image,
.p4 .image,
.p6 .image {
  grid-area: 2 / 1 / 3 / 2;
  align-self: left;
}

.p2 .image img,
.p4 .image img,
.p6 .image img {
  margin-left: 10%;
}

@media (max-width: 400px) and (max-height: 900px) {
  .text p {
    font-size: 1vh;
    margin: 2vw;
  }
}

@media (min-width: 700px) and (max-height: 400px) {
  .text p {
    font-size: 0.7vw;
    margin: 2vw;
  }

  .image img {
    height: auto;
    width: auto;
    max-width: 20vw;
  }

  h1 {
    font-size: 5vh;
  }
}

/* ---------------- */

/* Блок №1 */
.p1 {
  background: #ddd8d4;
  color: #252a2a;
}
/* ---------------- */

/* Блок №2 */
.p2 {
  background: #bbb7ab;
  color: #000;
}
/* ---------------- */

/* Блок №3 */
.p3 {
  background: #8b91a1;
  color: #000;
}
/* ---------------- */

/* Блок №4 */
.p4 {
  background: #7c7c7c;
  color: #fff;
}
/* ---------------- */

/* Блок №5 */
.p5 {
  background: #daa89b;
  color: #000;
}
/* ---------------- */

/* Блок №6 */
.p6 {
  background: #d17a22;
  color: #000;
}
/* ---------------- */