/********/
@-webkit-keyframes wave {
  0% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
  25% {
    transform: rotateZ(-4deg) translateZ(-1px);
  }
  50% {
    transform: rotateZ(2deg) translateZ(-1px);
  }
  75% {
    transform: rotateZ(-6deg) translateZ(-1px);
  }
  100% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
}

@-moz-keyframes wave {
  0% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
  25% {
    transform: rotateZ(-4deg) translateZ(-1px);
  }
  50% {
    transform: rotateZ(2deg) translateZ(-1px);
  }
  75% {
    transform: rotateZ(-6deg) translateZ(-1px);
  }
  100% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
}

@keyframes wave {
  0% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
  25% {
    transform: rotateZ(-4deg) translateZ(-1px);
  }
  50% {
    transform: rotateZ(2deg) translateZ(-1px);
  }
  75% {
    transform: rotateZ(-6deg) translateZ(-1px);
  }
  100% {
    transform: rotateZ(3deg) translateZ(-1px);
  }
}

#countryside {
  display: flex;
  justify-content: center;
  padding: var(--small-margin) var(--padding);
}

#countryside > figure {
  height: 80vw;
  width: 100%;
  background-image: url("../../statics/field.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-radius: var(--radius);
  /* background-blend-mode: multiply; */
  /* clip-path: ellipse(50% 100% at 50% 100%); */
}

.main > section#who > article {
  /* padding: 0; */
}

.main > section#who > article > p {
  font-size: var(--subtitle);
}

/* .main > section#who > article > p {
  font-size: var(--subtitle);
  padding-left: var(--med-content-margin);
  padding-right: var(--content-left-margin);
}

.main > section#who > article > p:nth-child(2n) {
  font-size: var(--subtitle);
  padding-left: var(--content-left-margin);
  padding-right: var(--med-content-margin);
} */

article#intro {
  width: 100%;
  padding: 0 var(--padding) 1.75rem;
}

/* article#intro > p {
  background-color: var(--kaki);
  color: var(--cream);
  font-size: var(--subtitle);
  padding: 1em;
  margin-bottom: 1.75rem;
  border-radius: var(--radius);
  border-bottom: 4px solid var(--base0);
} */

article#intro > div {
  margin-bottom: 1.75rem;
  border-bottom: 4px dotted;
}

article#intro > div:nth-of-type(1) {
  width: 45%;
}

article#intro > div:nth-of-type(2) {
  width: 25%;
}

article#intro > div:nth-of-type(3) {
  width: 35%;
}

.main > section#who > article.exerg > p {
  font-family: "Courgette";
  font-size: var(--title);
  padding-bottom: 1em;
  border-bottom: 1px solid;
}

.main > section > article.larger > figure#farm {
  border-width: 0;
  padding: var(--small-margin);
  margin: 0;
}

.main > section > article.larger > figure#farm > img {
  height: calc(100vw - 48px);
  border-radius: 50%;
  mix-blend-mode: multiply;
}

.main > section > article.larger > div {
  position: relative;
}

.main > section > article.larger > div > figure#grass {
  /* position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: var(--sky);
  opacity: 0.45;
  overflow: hidden;
  z-index: -1; */
  display: none;
}

/* .main > section > article.larger > div > figure#grass > div.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background-color: var(--ocre);
  z-index: 800;
}

.main > section > article.larger > div > figure#grass > div.blade {
  position: absolute;
  bottom: 0;
  height: 80%;
  width: 200px;
  overflow: hidden;
  transform-origin: 50% 100%;
}

.main > section > article.larger > div > figure#grass > div.blade.r-l {
  animation: wave 10s infinite ease-in-out;
}

.main > section > article.larger > div > figure#grass > div.blade.r-r {
  animation: wave 10s infinite ease-in-out;
  animation-direction: reverse;
}

.main > section > article.larger > div > figure#grass > div.blade::before,
.main > section > article.larger > div > figure#grass > div.blade::after {
  content: "";
  position: absolute;
  top: 0;
  height: 200%;
  width: 100%;
  border-top: 0;
  border-radius: 50%;
}

.main > section > article.larger > div > figure#grass > div.blade.r-l:before {
  right: 0;
  border-right: 22px solid var(--sand);
}

.main > section > article.larger > div > figure#grass > div.blade.r-l:after {
  right: 6px;
  border-right: 18px solid var(--ocre);
}

.main > section > article.larger > div > figure#grass > div.blade.r-r:before {
  left: 0;
  border-left: 22px solid var(--sand);
}

.main > section > article.larger > div > figure#grass > div.blade.r-r:after {
  left: 6px;
  border-left: 18px solid var(--ocre);
}

.main > section > article.larger > div > figure#grass > div.blade.left-n0 {
  left: -10%;
  height: 75%;
}

.main > section > article.larger > div > figure#grass > div.blade.left-0 {
  left: 0;
  height: 45%;
}

.main
  > section
  > article.larger
  > div
  > figure#grass
  > div.blade.left-0::before,
.main
  > section
  > article.larger
  > div
  > figure#grass
  > div.blade.left-0::after {
  border-radius: 30%;
}

.main > section > article.larger > div > figure#grass > div.blade.left-1 {
  left: 20%;
  width: 50%;
}

.main
  > section.larger
  > article
  > div
  > figure#grass
  > div.blade.left-1:before {
  border-width: 50px;
}

.main > section.larger > article > div > figure#grass > div.blade.left-1:after {
  border-width: 54px;
}

.main > section > article.larger > div > figure#grass > div.blade.left-1_5 {
  left: 35%;
  height: 70%;
  width: 50%;
}

.main > section > article.larger > div > figure#grass > div.blade.left-2 {
  left: 50%;
  height: 65%;
}

.main > section > article.larger > div > figure#grass > div.blade.left-3 {
  left: 15%;
  height: 90%;
}

.main > section > article.larger > div > figure#grass > div.blade.left-4 {
  left: 40%;
  height: 50%;
}

.main > section > article.larger > div > figure#grass > div.blade.left-5 {
  left: 70%;
  height: 80%;
}

.main > section > article.larger > div > figure#grass > div.blade.r-l.left-5 {
  height: 50%;
} */
@media screen and (min-width: 768px) {
  #countryside > figure {
    height: 50vw;
  }
}
@media screen and (min-width: 1024px) {
  #countryside > figure {
    height: 35vw;
  }
  article#intro {
    padding: 2.25rem var(--content-left-margin) 1.75rem;
  }

  .main > section#who > article.exerg.left {
    padding-left: var(--med-content-margin);
  }

  .main > section#who > article.exerg.right {
    padding-right: var(--med-content-margin);
  }
}

@media screen and (min-width: 1215px) {
  .main > section > article.larger > figure#farm {
    width: 50%;
  }

  .main > section > article.larger > figure#farm > img {
    height: calc(50vw - 48px);
  }

  /* .main > section > article.larger > div > figure#grass > div.blade {
    height: 40%;
  } */
}